@carbonplan/components 11.0.6 → 11.1.0-develop.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.
Files changed (7) hide show
  1. package/dst/index.esm.js +1 -2919
  2. package/dst/index.esm.js.map +1 -1
  3. package/dst/index.js +1 -2957
  4. package/dst/index.js.map +1 -1
  5. package/dst/index.modern.js +1 -2868
  6. package/dst/index.modern.js.map +1 -1
  7. package/package.json +3 -3
package/dst/index.esm.js CHANGED
@@ -1,2920 +1,2 @@
1
- import React, { forwardRef, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
2
- import { Box, Link as Link$2, Flex, Grid, IconButton, Container, useColorMode, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
3
- import { transparentize } from '@theme-ui/color';
4
- import NextLink from 'next/link';
5
- import { Arrow, Sun } from '@carbonplan/icons';
6
- import { PoopSad } from '@carbonplan/emoji';
7
- import Head from 'next/head';
8
- import { keyframes } from '@emotion/react';
9
-
10
- function _extends() {
11
- _extends = Object.assign || function (target) {
12
- for (var i = 1; i < arguments.length; i++) {
13
- var source = arguments[i];
14
-
15
- for (var key in source) {
16
- if (Object.prototype.hasOwnProperty.call(source, key)) {
17
- target[key] = source[key];
18
- }
19
- }
20
- }
21
-
22
- return target;
23
- };
24
-
25
- return _extends.apply(this, arguments);
26
- }
27
-
28
- function _objectWithoutPropertiesLoose(source, excluded) {
29
- if (source == null) return {};
30
- var target = {};
31
- var sourceKeys = Object.keys(source);
32
- var key, i;
33
-
34
- for (i = 0; i < sourceKeys.length; i++) {
35
- key = sourceKeys[i];
36
- if (excluded.indexOf(key) >= 0) continue;
37
- target[key] = source[key];
38
- }
39
-
40
- return target;
41
- }
42
-
43
- var _excluded$g = ["sx", "children"];
44
-
45
- var Badge = function Badge(_ref) {
46
- var sx = _ref.sx,
47
- children = _ref.children,
48
- props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
49
-
50
- var color = sx && sx.color ? sx.color : 'primary';
51
- return /*#__PURE__*/React.createElement(Box, _extends({
52
- sx: _extends({
53
- display: 'inline-block',
54
- width: 'fit-content',
55
- height: ['24px', '24px', '24px', '26px'],
56
- borderRadius: '5px',
57
- backgroundColor: color == 'primary' || color == 'secondary' ? 'muted' : transparentize(color, 0.7),
58
- textAlign: 'center',
59
- userSelect: 'none',
60
- fontSize: [2, 2, 2, 3]
61
- }, sx)
62
- }, props), /*#__PURE__*/React.createElement(Box, {
63
- sx: {
64
- letterSpacing: '0.02em',
65
- fontFamily: 'mono',
66
- mt: ['1px', '1px', '1px', '0px'],
67
- px: [1, 1, 1, '5px'],
68
- color: color
69
- }
70
- }, children));
71
- };
72
-
73
- var _excluded$f = ["href", "children", "internal", "tracking"];
74
-
75
- var event = function event(_ref) {
76
- var action = _ref.action,
77
- category = _ref.category,
78
- label = _ref.label,
79
- value = _ref.value;
80
-
81
- if (typeof window.gtag !== 'function') {
82
- console.warn("Missing window.gtag, skipping analytics action: '" + action + "'.");
83
- return;
84
- }
85
-
86
- window.gtag('event', action, {
87
- event_category: category,
88
- event_label: label,
89
- value: value
90
- });
91
- };
92
-
93
- var Link = function Link(_ref2, ref) {
94
- var href = _ref2.href,
95
- children = _ref2.children,
96
- _ref2$internal = _ref2.internal,
97
- internal = _ref2$internal === void 0 ? false : _ref2$internal,
98
- _ref2$tracking = _ref2.tracking,
99
- tracking = _ref2$tracking === void 0 ? false : _ref2$tracking,
100
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
101
-
102
- if (internal || href && href.startsWith('/')) {
103
- return /*#__PURE__*/React.createElement(NextLink, {
104
- href: href,
105
- passHref: true
106
- }, /*#__PURE__*/React.createElement(Link$2, _extends({
107
- ref: ref
108
- }, props), children));
109
- } else if (tracking) {
110
- var action;
111
- var category;
112
-
113
- if (href && href.includes('pdf')) {
114
- action = 'PDF';
115
- category = 'download';
116
- } else {
117
- action = 'website';
118
- category = 'external';
119
- }
120
-
121
- var track = function track(e) {
122
- event({
123
- action: action,
124
- category: category,
125
- label: href
126
- });
127
- };
128
-
129
- return /*#__PURE__*/React.createElement(Link$2, _extends({
130
- ref: ref,
131
- onClick: track,
132
- onContextMenu: track,
133
- href: href
134
- }, props), children);
135
- } else {
136
- return /*#__PURE__*/React.createElement(Link$2, _extends({
137
- ref: ref,
138
- href: href
139
- }, props), children);
140
- }
141
- };
142
-
143
- var Link$1 = forwardRef(Link);
144
-
145
- var getSizeStyles = function getSizeStyles(size) {
146
- if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
147
- throw new Error('Size must be xs, sm, md, lg, or xl');
148
- }
149
-
150
- var fontSize, fontFamily, letterSpacing, lineHeight;
151
-
152
- if (size === 'xs') {
153
- fontSize = [2, 2, 2, 3];
154
- fontFamily = 'body';
155
- letterSpacing = 'body';
156
- lineHeight = [1.2];
157
- }
158
-
159
- if (size === 'sm') {
160
- fontSize = [3, 3, 3, 4];
161
- fontFamily = 'body';
162
- letterSpacing = 'body';
163
- lineHeight = [1.2];
164
- }
165
-
166
- if (size === 'md') {
167
- fontSize = [4, 4, 4, 5];
168
- fontFamily = 'body';
169
- letterSpacing = 'body';
170
- lineHeight = [1.2];
171
- }
172
-
173
- if (size === 'lg') {
174
- fontSize = [5, 5, 6, 7];
175
- fontFamily = 'heading';
176
- letterSpacing = 'heading';
177
- lineHeight = [1.2, 1.2, 1.25, 1.25];
178
- }
179
-
180
- if (size === 'xl') {
181
- fontSize = [6, 7, 8, 9];
182
- fontFamily = 'heading';
183
- letterSpacing = 'heading';
184
- lineHeight = [1.25];
185
- }
186
-
187
- return {
188
- fontSize: fontSize,
189
- fontFamily: fontFamily,
190
- letterSpacing: letterSpacing,
191
- lineHeight: lineHeight
192
- };
193
- };
194
-
195
- var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
196
-
197
- var Button = function Button(_ref, ref) {
198
- var _ref$size = _ref.size,
199
- size = _ref$size === void 0 ? 'sm' : _ref$size,
200
- prefix = _ref.prefix,
201
- suffix = _ref.suffix,
202
- inverted = _ref.inverted,
203
- sx = _ref.sx,
204
- children = _ref.children,
205
- align = _ref.align,
206
- href = _ref.href,
207
- internal = _ref.internal,
208
- tracking = _ref.tracking,
209
- props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
210
-
211
- if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
212
- throw new Error('Size must be xs, sm, md, lg, or xl');
213
- }
214
-
215
- var offset, margin, height, width, strokeWidth;
216
- var color = sx && sx.color ? sx.color : null;
217
- var baseColor = color || (inverted ? 'secondary' : 'primary');
218
- var hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
219
-
220
- if (size === 'xs') {
221
- margin = ['6px', '6px', '6px', '6px'];
222
- height = [12, 12, 12, 13];
223
- width = [12, 12, 12, 13];
224
- strokeWidth = [1.5, 1.5, 1.5, 1.5];
225
- offset = {
226
- transform: 'translateY(0.25px)'
227
- };
228
- }
229
-
230
- if (size === 'sm') {
231
- margin = ['7px', '7px', '7px', '7px'];
232
- height = [13, 13, 13, 18];
233
- width = [13, 13, 13, 18];
234
- strokeWidth = [1.5, 1.5, 1.5, 2];
235
- offset = {
236
- transform: 'translateY(0.25px)'
237
- };
238
- }
239
-
240
- if (size === 'md') {
241
- margin = ['8px', '8px', '8px', '8px'];
242
- height = [18, 18, 18, 24];
243
- width = [18, 18, 18, 24];
244
- strokeWidth = [2, 2, 2, 3];
245
- }
246
-
247
- if (size === 'lg') {
248
- margin = ['10px', '10px', '12px', '16px'];
249
- height = [24, 24, 34, 46];
250
- width = [24, 24, 34, 46];
251
- strokeWidth = [3, 3, 4, 5];
252
- }
253
-
254
- if (size === 'xl') {
255
- margin = ['12px', '16px', '18px', '20px'];
256
- height = [34, 46, 56, 68];
257
- width = [34, 46, 56, 68];
258
- strokeWidth = [4, 5, 6, 7];
259
- }
260
-
261
- var prefixHover, suffixHover, prefixAlign, suffixAlign, prefixOffset, suffixOffset;
262
-
263
- if (align) {
264
- prefixAlign = align;
265
- suffixAlign = align;
266
- } else {
267
- if (prefix && suffix) {
268
- prefixAlign = 'initial';
269
- suffixAlign = 'initial';
270
- } else if (prefix) {
271
- prefixAlign = 'initial';
272
- } else if (suffix) {
273
- suffixAlign = 'middle';
274
- }
275
- }
276
-
277
- if (prefixAlign === 'middle') {
278
- prefixOffset = {};
279
- } else {
280
- prefixOffset = offset;
281
- }
282
-
283
- if (suffixAlign === 'middle') {
284
- suffixOffset = {};
285
- } else {
286
- suffixOffset = offset;
287
- }
288
-
289
- if (prefix) {
290
- prefixHover = {
291
- '&:hover > #prefix-span > #prefix': _extends({
292
- color: hoverColor
293
- }, prefix.type.hover)
294
- };
295
- prefix = cloneElement(prefix, {
296
- id: 'prefix',
297
- sx: _extends({
298
- position: 'relative',
299
- height: height,
300
- width: width,
301
- mr: children ? margin : [0],
302
- strokeWidth: strokeWidth,
303
- verticalAlign: prefixAlign,
304
- transition: 'color 0.15s, transform 0.15s'
305
- }, prefix.props.sx)
306
- });
307
- }
308
-
309
- if (suffix) {
310
- suffixHover = {
311
- '&:hover > #suffix-span >#suffix': _extends({
312
- color: hoverColor
313
- }, suffix.type.hover)
314
- };
315
- suffix = cloneElement(suffix, {
316
- id: 'suffix',
317
- sx: _extends({
318
- height: height,
319
- width: width,
320
- ml: children ? margin : [0],
321
- strokeWidth: strokeWidth,
322
- verticalAlign: suffixAlign,
323
- transition: 'color 0.15s, transform 0.15s'
324
- }, suffix.props.sx)
325
- });
326
- }
327
-
328
- var sizeStyles = getSizeStyles(size);
329
-
330
- var style = _extends({}, sizeStyles, {
331
- lineHeight: 1.05,
332
- border: 'none',
333
- background: 'transparent',
334
- display: 'block',
335
- color: baseColor,
336
- padding: [0],
337
- textAlign: 'left',
338
- cursor: 'pointer',
339
- width: 'fit-content',
340
- '@media (hover: hover) and (pointer: fine)': _extends({
341
- '&:hover': {
342
- color: hoverColor
343
- }
344
- }, suffixHover, prefixHover)
345
- }, sx);
346
-
347
- var Inner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
348
- as: "span",
349
- id: "prefix-span",
350
- sx: _extends({
351
- display: 'inline-block'
352
- }, prefixOffset)
353
- }, prefix && prefix), /*#__PURE__*/React.createElement(Box, {
354
- as: "span",
355
- sx: {
356
- transition: 'color 0.15s'
357
- }
358
- }, children), /*#__PURE__*/React.createElement(Box, {
359
- as: "span",
360
- id: "suffix-span",
361
- sx: _extends({
362
- display: 'inline-block'
363
- }, suffixOffset)
364
- }, suffix && suffix));
365
-
366
- if (href) {
367
- return /*#__PURE__*/React.createElement(Link$1, _extends({
368
- ref: ref,
369
- href: href,
370
- internal: internal,
371
- tracking: tracking,
372
- sx: _extends({}, style, {
373
- textDecoration: 'none'
374
- })
375
- }, props), Inner);
376
- } else {
377
- return /*#__PURE__*/React.createElement(Box, _extends({
378
- ref: ref,
379
- as: "button",
380
- sx: style
381
- }, props), Inner);
382
- }
383
- };
384
-
385
- var button = forwardRef(Button);
386
-
387
- var _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
388
-
389
- var Callout = function Callout(_ref, ref) {
390
- var label = _ref.label,
391
- children = _ref.children,
392
- inverted = _ref.inverted,
393
- color = _ref.color,
394
- href = _ref.href,
395
- internal = _ref.internal,
396
- tracking = _ref.tracking,
397
- sx = _ref.sx,
398
- props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
399
-
400
- var baseColor = color || (inverted ? 'secondary' : 'primary');
401
- var hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
402
-
403
- var style = _extends({
404
- border: 'none',
405
- padding: [0],
406
- fontSize: [3, 3, 3, 4],
407
- color: baseColor,
408
- background: 'transparent',
409
- textDecoration: 'none',
410
- fontFamily: 'body',
411
- lineHeight: 'h3',
412
- letterSpacing: 'body',
413
- width: 'fit-content',
414
- cursor: 'pointer',
415
- textAlign: 'left',
416
- mb: [1],
417
- '@media (hover: hover) and (pointer: fine)': {
418
- '&:hover > #container > #arrow': {
419
- transform: 'rotate(45deg)',
420
- fill: hoverColor
421
- },
422
- '&:hover': {
423
- color: hoverColor
424
- }
425
- }
426
- }, sx);
427
-
428
- var Inner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
429
- sx: {
430
- transition: '0.15s',
431
- letterSpacing: 'body',
432
- pb: ['6px']
433
- }
434
- }, children), /*#__PURE__*/React.createElement(Box, {
435
- sx: {
436
- transition: '0.15s',
437
- display: 'inline-block',
438
- textTransform: 'uppercase',
439
- letterSpacing: 'smallcaps',
440
- fontFamily: 'heading',
441
- fontSize: [2, 2, 2, 3]
442
- }
443
- }, label), /*#__PURE__*/React.createElement(Box, {
444
- as: "span",
445
- id: "container",
446
- sx: {
447
- ml: [2],
448
- display: 'inline-block'
449
- }
450
- }, /*#__PURE__*/React.createElement(Arrow, {
451
- id: "arrow",
452
- sx: {
453
- transition: 'fill 0.15s, transform 0.15s',
454
- position: 'relative',
455
- top: ['2px'],
456
- color: baseColor,
457
- height: [15, 15, 15, 17],
458
- width: [15, 15, 15, 17]
459
- }
460
- })));
461
-
462
- if (href) {
463
- return /*#__PURE__*/React.createElement(Link$1, _extends({
464
- ref: ref,
465
- href: href,
466
- internal: internal,
467
- tracking: tracking,
468
- sx: style
469
- }, props), Inner);
470
- } else {
471
- return /*#__PURE__*/React.createElement(Box, _extends({
472
- ref: ref,
473
- as: "button",
474
- sx: style
475
- }, props), Inner);
476
- }
477
- };
478
-
479
- var callout = forwardRef(Callout);
480
-
481
- var _excluded$c = ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"];
482
- var styles$1 = {
483
- clim: function clim(setClim) {
484
- return {
485
- fontFamily: 'mono',
486
- fontSize: ['9px', 0, 0, 1],
487
- letterSpacing: 'smallcaps',
488
- textTransform: 'uppercase',
489
- '@media (hover: hover) and (pointer: fine)': {
490
- '&:hover': {
491
- borderBottom: setClim ? function (_ref) {
492
- var colors = _ref.colors;
493
- return "solid 1px " + colors.primary + " !important";
494
- } : 'unset'
495
- }
496
- },
497
- '&:focus': {
498
- outline: 'none',
499
- borderBottom: setClim ? function (_ref2) {
500
- var colors = _ref2.colors;
501
- return "solid 1px " + colors.primary + " !important";
502
- } : 'unset'
503
- },
504
- transition: 'border 0.15s',
505
- userSelect: setClim ? 'none !important' : 'unset',
506
- width: 'fit-content',
507
- minWidth: 'fit-content'
508
- };
509
- }
510
- };
511
- var DIMENSIONS = {
512
- width: ['10px', '16px', '16px', '17px'],
513
- height: ['80px', '110px', '110px', '130px']
514
- };
515
-
516
- var Gradient = function Gradient(_ref3) {
517
- var colormap = _ref3.colormap,
518
- discrete = _ref3.discrete,
519
- horizontal = _ref3.horizontal,
520
- width = _ref3.width,
521
- height = _ref3.height;
522
- var step = 1 / colormap.length * 100;
523
- var values = colormap.map(function (d, i) {
524
- return "rgb(" + d + ") " + i * step + "% " + (discrete && i < colormap.length - 1 ? (i + 1) * step + "%" : '');
525
- });
526
- var css = "linear-gradient(to " + (horizontal ? 'right' : 'top') + ", " + values.join(',') + ")";
527
- return /*#__PURE__*/React.createElement(Box, {
528
- sx: _extends({}, horizontal ? {
529
- width: width || DIMENSIONS.height,
530
- height: height || DIMENSIONS.width
531
- } : {
532
- width: width || DIMENSIONS.width,
533
- minHeight: height || DIMENSIONS.height
534
- }, {
535
- mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
536
- border: function border(_ref4) {
537
- var colors = _ref4.colors;
538
- return "solid 1px " + colors.hinted;
539
- },
540
- background: css
541
- })
542
- });
543
- };
544
-
545
- var Label = function Label(_ref5) {
546
- var label = _ref5.label,
547
- units = _ref5.units,
548
- horizontal = _ref5.horizontal;
549
- return /*#__PURE__*/React.createElement(Box, {
550
- sx: !horizontal && {
551
- width: ['13px', '17px', '17px', '19px'],
552
- alignSelf: 'flex-end'
553
- }
554
- }, /*#__PURE__*/React.createElement(Box, {
555
- sx: _extends({
556
- mb: horizontal ? 0 : ['-4px', '-4px', '-4px', '-3px'],
557
- fontFamily: 'mono',
558
- fontSize: ['9px', 0, 0, 1],
559
- letterSpacing: 'smallcaps',
560
- textTransform: 'uppercase'
561
- }, horizontal ? {} : {
562
- writingMode: 'vertical-rl',
563
- transform: 'rotate(180deg)',
564
- whiteSpace: 'nowrap',
565
- display: 'inline-block',
566
- overflow: 'visible'
567
- })
568
- }, label, ' ', /*#__PURE__*/React.createElement(Box, {
569
- as: "span",
570
- sx: {
571
- textTransform: 'none',
572
- color: 'secondary',
573
- display: 'inline-block'
574
- }
575
- }, units)));
576
- };
577
-
578
- var Colorbar = function Colorbar(_ref6) {
579
- var colormap = _ref6.colormap,
580
- label = _ref6.label,
581
- clim = _ref6.clim,
582
- setClim = _ref6.setClim,
583
- _ref6$setClimStep = _ref6.setClimStep,
584
- setClimStep = _ref6$setClimStep === void 0 ? 1 : _ref6$setClimStep,
585
- discrete = _ref6.discrete,
586
- units = _ref6.units,
587
- width = _ref6.width,
588
- height = _ref6.height,
589
- _ref6$format = _ref6.format,
590
- format = _ref6$format === void 0 ? function (d) {
591
- return d;
592
- } : _ref6$format,
593
- _ref6$horizontal = _ref6.horizontal,
594
- horizontal = _ref6$horizontal === void 0 ? false : _ref6$horizontal,
595
- _ref6$bottom = _ref6.bottom,
596
- bottom = _ref6$bottom === void 0 ? false : _ref6$bottom,
597
- sx = _ref6.sx,
598
- sxClim = _ref6.sxClim,
599
- props = _objectWithoutPropertiesLoose(_ref6, _excluded$c);
600
-
601
- if (!Array.isArray(colormap)) {
602
- throw new Error("expected array for colormap, got '" + colormap + "'.");
603
- }
604
-
605
- var climRef = [useRef(), useRef()];
606
-
607
- var _useState = useState(false),
608
- climMinDragging = _useState[0],
609
- setClimMinDragging = _useState[1];
610
-
611
- var _useState2 = useState(false),
612
- climMaxDragging = _useState2[0],
613
- setClimMaxDragging = _useState2[1];
614
-
615
- var x,
616
- y,
617
- dx,
618
- dy = 0;
619
- var id = null;
620
- var init = [0, 0];
621
- var scale = setClimStep;
622
-
623
- var draggingFunction = function draggingFunction(e) {
624
- if (id === 'min' && !climMinDragging) setClimMinDragging(true);
625
- if (id === 'max' && !climMaxDragging) setClimMaxDragging(true);
626
- dx = e.pageX - x;
627
- dy = e.pageY - y;
628
-
629
- if (horizontal) {
630
- if (id === 'min') setClim(function (prev) {
631
- return [Math.min(init[0] + dx * scale, init[1]), prev[1]];
632
- });
633
- if (id === 'max') setClim(function (prev) {
634
- return [prev[0], Math.max(init[1] + dx * scale, init[0])];
635
- });
636
- } else {
637
- if (id === 'min') setClim(function (prev) {
638
- return [Math.min(init[0] - dy * scale, init[1]), prev[1]];
639
- });
640
- if (id === 'max') setClim(function (prev) {
641
- return [prev[0], Math.max(init[1] - dy * scale, init[0])];
642
- });
643
- }
644
- };
645
-
646
- var handleMouseDown = function handleMouseDown(e) {
647
- y = e.pageY;
648
- x = e.pageX;
649
- id = e.target.id;
650
- init = clim;
651
- document.body.setAttribute('style', horizontal ? 'cursor: ew-resize !important' : 'cursor: ns-resize !important');
652
- document.addEventListener('mousemove', draggingFunction);
653
-
654
- var updater = function updater() {
655
- document.body.setAttribute('style', 'cursor: unset');
656
- document.removeEventListener('mousemove', draggingFunction);
657
- window.removeEventListener('mouseup', updater);
658
- if (id === 'min') setClimMinDragging(false);
659
- if (id === 'max') setClimMaxDragging(false);
660
- };
661
-
662
- window.addEventListener('mouseup', updater);
663
- };
664
-
665
- var increment = function increment(e) {
666
- if (climRef[0].current === document.activeElement) {
667
- e.preventDefault();
668
- setClim(function (prev) {
669
- return [Math.min(prev[0] + scale, prev[1]), prev[1]];
670
- });
671
- climRef[0].current.focus();
672
- }
673
-
674
- if (climRef[1].current === document.activeElement) {
675
- e.preventDefault();
676
- setClim(function (prev) {
677
- return [prev[0], Math.max(prev[1] + scale, prev[0])];
678
- });
679
- climRef[1].current.focus();
680
- }
681
- };
682
-
683
- var decrement = function decrement(e) {
684
- if (climRef[0].current === document.activeElement) {
685
- e.preventDefault();
686
- setClim(function (prev) {
687
- return [Math.min(prev[0] - scale, prev[1]), prev[1]];
688
- });
689
- climRef[0].current.focus();
690
- }
691
-
692
- if (climRef[1].current === document.activeElement) {
693
- e.preventDefault();
694
- setClim(function (prev) {
695
- return [prev[0], Math.max(prev[1] - scale, prev[0])];
696
- });
697
- climRef[1].current.focus();
698
- }
699
- };
700
-
701
- useEffect(function () {
702
- var listener = function listener(e) {
703
- if (['ArrowUp', 'ArrowRight'].includes(e.code) || ['ArrowUp', 'ArrowRight'].includes(e.key)) {
704
- increment(e);
705
- }
706
-
707
- if (['ArrowDown', 'ArrowLeft'].includes(e.code) || ['ArrowDown', 'ArrowLeft'].includes(e.key)) {
708
- decrement(e);
709
- }
710
- };
711
-
712
- window.addEventListener('keydown', listener);
713
- return function () {
714
- window.removeEventListener('keydown', listener);
715
- };
716
- }, [clim]);
717
-
718
- var ClimMin = function ClimMin() {
719
- return /*#__PURE__*/React.createElement(Box, {
720
- id: "min",
721
- ref: climRef[0],
722
- tabIndex: 0,
723
- sx: _extends({}, styles$1.clim(setClim), {
724
- ml: label ? horizontal ? bottom ? '0px' : '10px' : ['2px', '1px', '1px', '2px'] : 0,
725
- mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
726
- mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px'],
727
- borderBottom: setClim ? climMinDragging ? function (_ref7) {
728
- var colors = _ref7.colors;
729
- return "solid 1px " + colors.primary;
730
- } : function (_ref8) {
731
- var colors = _ref8.colors;
732
- return "solid 1px " + colors.secondary;
733
- } : 'unset',
734
- cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
735
- }, sxClim),
736
- onMouseDown: setClim ? handleMouseDown : function () {},
737
- onClick: function onClick() {
738
- return climRef[0].current.focus();
739
- }
740
- }, format(clim[0]));
741
- };
742
-
743
- var ClimMax = function ClimMax() {
744
- return /*#__PURE__*/React.createElement(Box, {
745
- id: "max",
746
- ref: climRef[1],
747
- tabIndex: 0,
748
- sx: _extends({}, styles$1.clim(setClim), {
749
- ml: horizontal ? ['2px', '1px', '1px', '2px'] : ['2px', '1px', '1px', '2px'],
750
- mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
751
- borderBottom: setClim ? climMaxDragging ? function (_ref9) {
752
- var colors = _ref9.colors;
753
- return "solid 1px " + colors.primary;
754
- } : function (_ref10) {
755
- var colors = _ref10.colors;
756
- return "solid 1px " + colors.secondary;
757
- } : 'unset',
758
- cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
759
- }, sxClim),
760
- onMouseDown: setClim ? handleMouseDown : function () {},
761
- onClick: function onClick() {
762
- return climRef[1].current.focus();
763
- }
764
- }, format(clim[1]));
765
- };
766
-
767
- return /*#__PURE__*/React.createElement(Flex, _extends({}, props, {
768
- sx: _extends({
769
- flexDirection: 'row',
770
- alignItems: 'start',
771
- justifyContent: 'flex-start',
772
- gap: ['3px', '6px', '6px', '7px'],
773
- height: !horizontal ? '100%' : 'unset'
774
- }, sx)
775
- }), label && /*#__PURE__*/React.createElement(Label, {
776
- label: label,
777
- units: units,
778
- horizontal: horizontal
779
- }), /*#__PURE__*/React.createElement(Flex, {
780
- sx: {
781
- flexGrow: horizontal ? 1 : 'unset',
782
- flexDirection: 'column',
783
- ml: bottom && label ? '4px' : '0px',
784
- height: !horizontal ? '100%' : 'unset'
785
- }
786
- }, /*#__PURE__*/React.createElement(Flex, {
787
- sx: {
788
- gap: ['3px', '6px', '6px', '7px'],
789
- height: !horizontal ? '100%' : 'unset'
790
- }
791
- }, horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
792
- colormap: colormap,
793
- horizontal: horizontal,
794
- discrete: discrete,
795
- width: width,
796
- height: height
797
- }), horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMax, null)), horizontal && clim && bottom && /*#__PURE__*/React.createElement(Flex, {
798
- sx: {
799
- justifyContent: 'space-between'
800
- }
801
- }, /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(ClimMax, null))), !horizontal && /*#__PURE__*/React.createElement(Flex, {
802
- sx: {
803
- flexDirection: 'column-reverse',
804
- justifyContent: 'space-between',
805
- height: height || DIMENSIONS.height
806
- }
807
- }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
808
- };
809
-
810
- var _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
811
-
812
- var Column = function Column(_ref) {
813
- var start = _ref.start,
814
- width = _ref.width,
815
- dl = _ref.dl,
816
- dr = _ref.dr,
817
- children = _ref.children,
818
- sx = _ref.sx,
819
- props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
820
-
821
- start = start || 'auto';
822
- width = width || 'auto';
823
-
824
- var makeArray = function makeArray(input) {
825
- if (input && !Array.isArray(input)) {
826
- input = [input];
827
- }
828
-
829
- if (![1, 2, 4].includes(input.length)) {
830
- throw new Error('Array length must be 1, 2, or 4');
831
- }
832
-
833
- if (Array.isArray(input) && input.length == 1) {
834
- input = input.map(function (d) {
835
- return [d, d, d, d];
836
- }).flat();
837
- } else if (Array.isArray(input) && input.length == 2) {
838
- input = input.map(function (d) {
839
- return [d, d];
840
- }).flat();
841
- }
842
-
843
- return input;
844
- };
845
-
846
- start = makeArray(start);
847
- width = makeArray(width);
848
- var end = start.map(function (d, i) {
849
- if (d == 'auto') return 'auto';
850
- return d + width[i];
851
- });
852
- var ml, mr;
853
-
854
- if (dl) {
855
- if (![0.5, 1].includes(dl)) {
856
- throw new Error('dl must be 0.5 or 1');
857
- }
858
-
859
- if (dl === 0.5) {
860
- ml = ['-12px', -3, -3, -4];
861
- }
862
-
863
- if (dl === 1) {
864
- ml = [-4, -5, -5, -6];
865
- }
866
- }
867
-
868
- if (dr) {
869
- if (![0.5, 1].includes(dr)) {
870
- throw new Error('dr must be 0.5 or 1');
871
- }
872
-
873
- if (dr === 0.5) {
874
- mr = ['-12px', -3, -3, -4];
875
- }
876
-
877
- if (dr === 1) {
878
- mr = [-4, -5, -5, -6];
879
- }
880
- }
881
-
882
- return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
883
- sx: _extends({
884
- gridColumnStart: start,
885
- gridColumnEnd: end,
886
- ml: ml,
887
- mr: mr
888
- }, sx)
889
- }), children);
890
- };
891
-
892
- var Meta = function Meta(_ref) {
893
- var title = _ref.title,
894
- description = _ref.description,
895
- card = _ref.card;
896
- title = title ? title : 'carbonplan';
897
- description = description ? description : 'Data and science for climate action.';
898
- card = card ? card : 'https://images.carbonplan.org/social/homepage.png';
899
- return /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("meta", {
900
- name: "description",
901
- content: description
902
- }), /*#__PURE__*/React.createElement("meta", {
903
- name: "viewport",
904
- content: "initial-scale=1.0, width=device-width"
905
- }), /*#__PURE__*/React.createElement("link", {
906
- rel: "canonical",
907
- content: "https://carbonplan.org/"
908
- }), /*#__PURE__*/React.createElement("link", {
909
- rel: "icon",
910
- type: "image/svg+xml",
911
- href: "https://images.carbonplan.org/favicon.svg"
912
- }), /*#__PURE__*/React.createElement("link", {
913
- rel: "preload",
914
- href: "https://fonts.carbonplan.org/relative/relative-book-pro.woff2",
915
- as: "font",
916
- type: "font/woff2",
917
- crossOrigin: "anonymous"
918
- }), /*#__PURE__*/React.createElement("link", {
919
- rel: "preload",
920
- href: "https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",
921
- as: "font",
922
- type: "font/woff2",
923
- crossOrigin: "anonymous"
924
- }), /*#__PURE__*/React.createElement("link", {
925
- rel: "preload",
926
- href: "https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",
927
- as: "font",
928
- type: "font/woff2",
929
- crossOrigin: "anonymous"
930
- }), /*#__PURE__*/React.createElement("link", {
931
- rel: "preload",
932
- href: "https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",
933
- as: "font",
934
- type: "font/woff2",
935
- crossOrigin: "anonymous"
936
- }), /*#__PURE__*/React.createElement("link", {
937
- rel: "manifest",
938
- href: "https://images.carbonplan.org/manifest.json"
939
- }), /*#__PURE__*/React.createElement("meta", {
940
- name: "theme-color",
941
- content: "#1b1e23"
942
- }), /*#__PURE__*/React.createElement("link", {
943
- rel: "alternate icon",
944
- type: "image/png",
945
- href: "https://images.carbonplan.org/favicon.png"
946
- }), /*#__PURE__*/React.createElement("link", {
947
- rel: "mask-icon",
948
- href: "https://images.carbonplan.org/safari-pinned-tab.svg",
949
- color: "#000000"
950
- }), /*#__PURE__*/React.createElement("link", {
951
- rel: "apple-touch-icon",
952
- sizes: "180x180",
953
- href: "https://images.carbonplan.org/apple-touch-icon.png"
954
- }), /*#__PURE__*/React.createElement("meta", {
955
- name: "msapplication-TileColor",
956
- content: "#1b1e23"
957
- }), /*#__PURE__*/React.createElement("meta", {
958
- name: "msapplication-TileImage",
959
- content: "https://images.carbonplan.org/mstile-144x144.png"
960
- }), /*#__PURE__*/React.createElement("meta", {
961
- name: "msapplication-config",
962
- content: "https://images.carbonplan.org/browserconfig.xml"
963
- }), /*#__PURE__*/React.createElement("meta", {
964
- property: "og:title",
965
- content: title
966
- }), /*#__PURE__*/React.createElement("meta", {
967
- property: "og:description",
968
- content: description
969
- }), /*#__PURE__*/React.createElement("meta", {
970
- property: "og:image",
971
- content: card
972
- }), /*#__PURE__*/React.createElement("meta", {
973
- property: "og:url",
974
- content: "https://carbonplan.org"
975
- }), /*#__PURE__*/React.createElement("meta", {
976
- name: "twitter:title",
977
- content: title
978
- }), /*#__PURE__*/React.createElement("meta", {
979
- name: "twitter:description",
980
- content: description
981
- }), /*#__PURE__*/React.createElement("meta", {
982
- name: "twitter:image",
983
- content: card
984
- }), /*#__PURE__*/React.createElement("meta", {
985
- name: "twitter:card",
986
- content: "summary_large_image"
987
- }));
988
- };
989
-
990
- var Logo = function Logo(_ref) {
991
- var props = _extends({}, _ref);
992
-
993
- return /*#__PURE__*/React.createElement(Box, _extends({
994
- as: "svg",
995
- width: "150",
996
- fill: "currentColor",
997
- stroke: "none",
998
- viewBox: "0 0 151.1 28.8"
999
- }, props), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1000
- d: "M9.7,20.1c-1.3-1.4-2-3.1-2-5.2c0-2.1,0.7-3.9,2-5.2c1.3-1.4,3-2,5.1-2c1.7,0,3.1,0.4,4.3,1.3 c1.1,0.9,1.8,2.1,2.1,3.5c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.2,0.2h-2.3c-0.2,0-0.3-0.1-0.4-0.2c-0.3-0.8-0.7-1.4-1.3-1.8 c-0.6-0.4-1.4-0.6-2.2-0.6c-1.3,0-2.3,0.4-3,1.2c-0.8,0.8-1.1,1.9-1.1,3.4c0,1.5,0.4,2.6,1.1,3.4c0.8,0.8,1.8,1.2,3,1.2 c0.8,0,1.6-0.2,2.2-0.6c0.6-0.4,1.1-1,1.3-1.8c0.1-0.2,0.2-0.2,0.4-0.3H21c0.1,0,0.2,0.1,0.2,0.2c0,0.1,0,0.2,0,0.3 c-0.3,1.4-1,2.6-2.1,3.5c-1.1,0.9-2.5,1.3-4.3,1.3C12.7,22.1,11,21.4,9.7,20.1z"
1001
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1002
- d: "M22.5,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1C30.6,7.6,32,8.1,33,9c1,0.9,1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C23,20.1,22.5,19,22.5,17.6z M25.4,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C25.7,16.3,25.4,16.8,25.4,17.5z"
1003
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1004
- d: "M37,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.1c1-1.1,2.3-1.6,3.7-1.6 c0.8,0,1.7,0.1,2.5,0.4c0.2,0.1,0.3,0.3,0.3,0.5v2.2c0,0.2-0.1,0.3-0.2,0.3c0,0-0.1,0-0.2-0.1c-1.1-0.5-2-0.8-2.9-0.8 c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,3v7.3c0,0.2-0.1,0.3-0.3,0.3h-2.2C37.1,21.8,37,21.7,37,21.6z"
1005
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1006
- d: "M47.6,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3H50c0.2,0,0.3,0.1,0.3,0.3v6.5c1.3-1.1,2.7-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2c1.1,1.3,1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.8,0-3.2-0.5-4.3-1.6v1 c0,0.2-0.1,0.3-0.3,0.3h-2.2C47.7,21.8,47.6,21.7,47.6,21.6z M51.2,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3 s1.7,1.3,2.9,1.3c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3 C52.9,10.2,51.9,10.7,51.2,11.5z"
1007
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1008
- d: "M64.3,20.1c-1.4-1.4-2.1-3.1-2.1-5.2c0-2.1,0.7-3.9,2.1-5.2c1.4-1.4,3.1-2,5.2-2c2.1,0,3.8,0.7,5.2,2 c1.4,1.4,2.1,3.1,2.1,5.2c0,2.1-0.7,3.9-2.1,5.2c-1.4,1.4-3.1,2-5.2,2C67.4,22.1,65.7,21.4,64.3,20.1z M66.4,11.5 c-0.8,0.8-1.2,2-1.2,3.4c0,1.4,0.4,2.5,1.2,3.4s1.9,1.3,3.1,1.3c1.3,0,2.3-0.4,3.1-1.3c0.8-0.8,1.2-2,1.2-3.4 c0-1.4-0.4-2.5-1.2-3.4c-0.8-0.8-1.9-1.3-3.1-1.3C68.2,10.2,67.2,10.7,66.4,11.5z"
1009
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1010
- d: "M78.7,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C78.7,21.8,78.7,21.7,78.7,21.6z"
1011
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1012
- d: "M101.7,27.1V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1c1.1-1.1,2.5-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2s1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.5,0-3-0.5-4.3-1.6v6.6c0,0.2-0.1,0.3-0.3,0.3 H102C101.8,27.3,101.7,27.2,101.7,27.1z M105.3,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3s1.7,1.3,2.9,1.3 c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3C107,10.2,106,10.7,105.3,11.5z"
1013
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1014
- d: "M117.2,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v18.9c0,0.2-0.1,0.3-0.3,0.3h-2.2 C117.3,21.8,117.2,21.7,117.2,21.6z"
1015
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1016
- d: "M122,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1c1.7,0,3.1,0.5,4.2,1.4s1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C122.5,20.1,122,19,122,17.6z M124.9,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C125.2,16.3,124.9,16.8,124.9,17.5z"
1017
- })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
1018
- d: "M136.9,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C137,21.8,136.9,21.7,136.9,21.6z"
1019
- })), /*#__PURE__*/React.createElement("path", {
1020
- d: "M97.6,14.9c0,4.2-0.6,8.3-1.6,12.3c0,0.1-0.1,0.2-0.2,0.2h-2.4c-0.1,0-0.2-0.1-0.2-0.3c1.1-3.9,1.7-8,1.7-12.2 s-0.6-8.3-1.7-12.2c0-0.1,0.1-0.3,0.2-0.3l2.4,0c0.1,0,0.2,0.1,0.2,0.2C97.1,6.5,97.6,10.6,97.6,14.9z"
1021
- }), /*#__PURE__*/React.createElement("path", {
1022
- d: "M1.4,14.9C1.4,10.6,2,6.5,3,2.6c0-0.1,0.1-0.2,0.2-0.2l2.4,0c0.1,0,0.2,0.1,0.2,0.3c-1.1,3.9-1.7,8-1.7,12.2 s0.6,8.3,1.7,12.2c0,0.1-0.1,0.3-0.2,0.3H3.3c-0.1,0-0.2-0.1-0.2-0.2C2,23.2,1.4,19.1,1.4,14.9z"
1023
- })));
1024
- };
1025
-
1026
- var _excluded$a = ["children", "sx", "columns", "gap"];
1027
-
1028
- var Row = function Row(_ref) {
1029
- var children = _ref.children,
1030
- sx = _ref.sx,
1031
- columns = _ref.columns,
1032
- gap = _ref.gap,
1033
- props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
1034
-
1035
- var makeArray = function makeArray(input) {
1036
- if (!Array.isArray(input)) {
1037
- input = [input, input, input, input];
1038
- }
1039
-
1040
- if (Array.isArray(input) && ![1, 2, 4].includes(input.length)) {
1041
- throw new Error('Array length must be 1, 2, or 4');
1042
- }
1043
-
1044
- if (Array.isArray(input) && input.length == 1) {
1045
- input = input.map(function (d) {
1046
- return [d];
1047
- }).flat();
1048
- }
1049
-
1050
- if (Array.isArray(input) && input.length == 2) {
1051
- input = input.map(function (d) {
1052
- return [d, d];
1053
- }).flat();
1054
- }
1055
-
1056
- return input;
1057
- };
1058
-
1059
- var columnGap, rowGap;
1060
-
1061
- if (Number.isInteger(gap) || Array.isArray(gap)) {
1062
- gap = makeArray(gap);
1063
- columnGap = gap;
1064
- rowGap = gap;
1065
- } else {
1066
- columnGap = [4, 5, 5, 6];
1067
- rowGap = [0, 0, 0, 0];
1068
- }
1069
-
1070
- if (Number.isInteger(columns) || Array.isArray(columns)) {
1071
- columns = makeArray(columns);
1072
- } else {
1073
- columns = [6, 8, 12, 12];
1074
- }
1075
-
1076
- return /*#__PURE__*/React.createElement(Grid, _extends({}, props, {
1077
- columns: columns,
1078
- sx: _extends({
1079
- columnGap: columnGap,
1080
- rowGap: rowGap
1081
- }, sx)
1082
- }), children);
1083
- };
1084
-
1085
- var _excluded$9 = ["value", "sx"];
1086
-
1087
- var Menu = function Menu(_ref) {
1088
- var value = _ref.value,
1089
- sx = _ref.sx,
1090
- props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
1091
-
1092
- return /*#__PURE__*/React.createElement(IconButton, _extends({
1093
- sx: _extends({
1094
- cursor: 'pointer',
1095
- fill: 'none',
1096
- strokeWidth: '2px',
1097
- stroke: 'text',
1098
- '.paren': {
1099
- opacity: '0'
1100
- },
1101
- '@media (hover: hover) and (pointer: fine)': {
1102
- '&:hover .paren': {
1103
- opacity: '1'
1104
- }
1105
- }
1106
- }, sx),
1107
- "aria-label": "Toggle Menu"
1108
- }, props), !value && /*#__PURE__*/React.createElement("svg", {
1109
- style: {
1110
- width: '50px',
1111
- height: '30px',
1112
- transform: 'scale(2)',
1113
- marginTop: '-3px'
1114
- },
1115
- xmlns: "http://www.w3.org/2000/svg",
1116
- viewBox: "0 0 68 36"
1117
- }, /*#__PURE__*/React.createElement("line", {
1118
- x1: "52",
1119
- y1: "29.9",
1120
- x2: "16",
1121
- y2: "29.9"
1122
- }), /*#__PURE__*/React.createElement("line", {
1123
- x1: "52",
1124
- y1: "6.1",
1125
- x2: "16",
1126
- y2: "6.1"
1127
- }), /*#__PURE__*/React.createElement("line", {
1128
- x1: "52",
1129
- y1: "18",
1130
- x2: "16",
1131
- y2: "18"
1132
- }), /*#__PURE__*/React.createElement("path", {
1133
- style: {
1134
- transition: 'all 0.2s'
1135
- },
1136
- className: "paren",
1137
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
1138
- }), /*#__PURE__*/React.createElement("path", {
1139
- style: {
1140
- transition: 'all 0.2s'
1141
- },
1142
- className: "paren",
1143
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
1144
- })), value && /*#__PURE__*/React.createElement("svg", {
1145
- style: {
1146
- width: '50px',
1147
- height: '30px',
1148
- transform: 'scale(2)',
1149
- marginTop: '-3px'
1150
- },
1151
- xmlns: "http://www.w3.org/2000/svg",
1152
- viewBox: "0 0 68 36"
1153
- }, /*#__PURE__*/React.createElement("line", {
1154
- x1: "50.85",
1155
- y1: "29.79",
1156
- x2: "17.15",
1157
- y2: "6.21"
1158
- }), /*#__PURE__*/React.createElement("line", {
1159
- x1: "17.15",
1160
- y1: "29.79",
1161
- x2: "50.85",
1162
- y2: "6.21"
1163
- }), /*#__PURE__*/React.createElement("path", {
1164
- style: {
1165
- transition: 'all 0.2s'
1166
- },
1167
- className: "paren",
1168
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
1169
- }), /*#__PURE__*/React.createElement("path", {
1170
- style: {
1171
- transition: 'all 0.2s'
1172
- },
1173
- className: "paren",
1174
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
1175
- })));
1176
- };
1177
-
1178
- var sx$1 = {
1179
- link: function link(current, label, first) {
1180
- if (first === void 0) {
1181
- first = false;
1182
- }
1183
-
1184
- return {
1185
- width: 'auto',
1186
- color: current === label ? 'secondary' : 'text',
1187
- fontSize: [6, 6, 7, 8],
1188
- fontFamily: 'heading',
1189
- letterSpacing: 'heading',
1190
- borderStyle: 'solid',
1191
- borderColor: 'muted',
1192
- borderWidth: '0px',
1193
- borderBottomWidth: '1px',
1194
- borderTopWidth: first ? '1px' : '0px',
1195
- py: [3, 3, 4, 5],
1196
- textDecoration: 'none',
1197
- display: 'block',
1198
- position: 'relative',
1199
- transition: 'color 0.15s',
1200
- '@media (hover: hover) and (pointer: fine)': {
1201
- '&:hover > #arrow': {
1202
- opacity: 1
1203
- }
1204
- },
1205
- '&:hover': {
1206
- color: current == label ? 'secondary' : 'text'
1207
- }
1208
- };
1209
- }
1210
- };
1211
- var links = [{
1212
- url: 'about',
1213
- display: 'About'
1214
- }, {
1215
- url: 'research',
1216
- display: 'Research'
1217
- }, {
1218
- url: 'blog',
1219
- display: 'Blog'
1220
- }, {
1221
- url: 'press',
1222
- display: 'Press'
1223
- }];
1224
-
1225
- var HoverArrow = function HoverArrow() {
1226
- return /*#__PURE__*/React.createElement(Arrow, {
1227
- id: "arrow",
1228
- sx: {
1229
- pointerEvents: 'none',
1230
- display: 'inline-block',
1231
- position: 'absolute',
1232
- left: ['-60px', '-68px', '-80px', '-104px'],
1233
- top: ['32px', '32px', '46px', '62px'],
1234
- opacity: 0,
1235
- transition: 'opacity 0.2s ease-out',
1236
- transform: 'rotate(45deg)',
1237
- width: [36, 36, 48, 56],
1238
- height: [36, 36, 48, 56]
1239
- }
1240
- });
1241
- };
1242
-
1243
- var Nav = function Nav(_ref) {
1244
- var link = _ref.link,
1245
- mode = _ref.mode,
1246
- nav = _ref.nav,
1247
- first = _ref.first,
1248
- setExpanded = _ref.setExpanded;
1249
- var url = link.url,
1250
- display = link.display;
1251
- var href = mode === 'remote' ? 'https://carbonplan.org/' + url : '/' + url;
1252
-
1253
- if (mode === 'homepage' || mode === 'local' && nav === url) {
1254
- return /*#__PURE__*/React.createElement(NextLink, {
1255
- href: href,
1256
- passHref: true
1257
- }, /*#__PURE__*/React.createElement(Link$2, {
1258
- onClick: function onClick() {
1259
- if (nav === url) setExpanded(false);
1260
- },
1261
- sx: sx$1.link(nav, url, first)
1262
- }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
1263
- } else {
1264
- return /*#__PURE__*/React.createElement(Link$2, {
1265
- href: href,
1266
- sx: sx$1.link(nav, url, first)
1267
- }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
1268
- }
1269
- };
1270
-
1271
- var NavGroup = function NavGroup(_ref2) {
1272
- var links = _ref2.links,
1273
- nav = _ref2.nav,
1274
- mode = _ref2.mode,
1275
- setExpanded = _ref2.setExpanded;
1276
- return links.map(function (d, i) {
1277
- return /*#__PURE__*/React.createElement(Nav, {
1278
- key: i,
1279
- link: d,
1280
- mode: mode,
1281
- nav: nav,
1282
- first: i === 0,
1283
- setExpanded: setExpanded
1284
- });
1285
- });
1286
- };
1287
-
1288
- var Header = function Header(_ref3) {
1289
- var status = _ref3.status,
1290
- mode = _ref3.mode,
1291
- nav = _ref3.nav,
1292
- menuItems = _ref3.menuItems;
1293
-
1294
- var _useState = useState(false),
1295
- expanded = _useState[0],
1296
- setExpanded = _useState[1];
1297
-
1298
- var toggle = function toggle(e) {
1299
- setExpanded(!expanded);
1300
- };
1301
-
1302
- return /*#__PURE__*/React.createElement(Row, {
1303
- sx: {
1304
- pt: ['12px'],
1305
- pb: [3]
1306
- }
1307
- }, /*#__PURE__*/React.createElement(Column, {
1308
- start: [1],
1309
- width: [2]
1310
- }, /*#__PURE__*/React.createElement(Box, {
1311
- sx: {
1312
- display: 'block',
1313
- width: 'fit-content'
1314
- }
1315
- }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React.createElement(NextLink, {
1316
- href: "/",
1317
- passHref: true
1318
- }, /*#__PURE__*/React.createElement(Link$2, {
1319
- "aria-label": "CarbonPlan Homepage",
1320
- sx: {
1321
- display: 'block'
1322
- }
1323
- }, /*#__PURE__*/React.createElement(Logo, {
1324
- id: "logo",
1325
- sx: {
1326
- cursor: 'pointer',
1327
- color: 'primary'
1328
- }
1329
- }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$2, {
1330
- href: "https://carbonplan.org",
1331
- "aria-label": "CarbonPlan Homepage",
1332
- sx: {
1333
- display: 'block'
1334
- }
1335
- }, /*#__PURE__*/React.createElement(Logo, {
1336
- sx: {
1337
- cursor: 'pointer',
1338
- color: 'primary'
1339
- }
1340
- })))), /*#__PURE__*/React.createElement(Column, {
1341
- start: [4, 9],
1342
- width: [2, 2],
1343
- dr: 1,
1344
- sx: {
1345
- display: [status ? 'flex' : 'none', 'flex', 'flex', 'flex'],
1346
- alignItems: 'center'
1347
- }
1348
- }, /*#__PURE__*/React.createElement(Box, {
1349
- sx: {
1350
- fontSize: [1, 2, 3],
1351
- position: 'relative',
1352
- top: ['-2px', '-3px', '-3px']
1353
- }
1354
- }, status ? "(" + status + ")" : '')), /*#__PURE__*/React.createElement(Column, {
1355
- start: [status ? 6 : 4, 6, 11, 11],
1356
- width: [status ? 1 : 3, 3, 2, 2],
1357
- sx: {
1358
- zIndex: 5000
1359
- }
1360
- }, /*#__PURE__*/React.createElement(Flex, {
1361
- sx: {
1362
- justifyContent: 'flex-end'
1363
- }
1364
- }, /*#__PURE__*/React.createElement(Flex, {
1365
- sx: {
1366
- mr: '18px',
1367
- gap: '18px',
1368
- opacity: expanded ? 0 : 1,
1369
- transition: 'opacity 0.15s',
1370
- justifyContent: 'space-between',
1371
- alignItems: 'center'
1372
- }
1373
- }, menuItems), /*#__PURE__*/React.createElement(Menu, {
1374
- sx: {
1375
- mr: ['-2px']
1376
- },
1377
- value: expanded,
1378
- onClick: toggle
1379
- }))), /*#__PURE__*/React.createElement(Box, {
1380
- sx: {
1381
- opacity: expanded ? 1 : 0,
1382
- pointerEvents: expanded ? 'all' : 'none',
1383
- position: 'fixed',
1384
- top: '0px',
1385
- right: '0px',
1386
- bottom: '0px',
1387
- minWidth: '0px',
1388
- maxHeight: '100vh',
1389
- width: '100vw',
1390
- backgroundColor: 'background',
1391
- zIndex: 4000,
1392
- pt: ['79px'],
1393
- transition: 'opacity 0.25s'
1394
- }
1395
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
1396
- start: [2, 4, 7, 7],
1397
- width: [5, 4, 5, 5]
1398
- }, /*#__PURE__*/React.createElement(Box, {
1399
- as: "nav",
1400
- sx: {
1401
- display: expanded ? 'inherit' : 'none',
1402
- mt: [5, 5, 5, 6]
1403
- }
1404
- }, /*#__PURE__*/React.createElement(NavGroup, {
1405
- links: links,
1406
- nav: nav,
1407
- mode: mode,
1408
- setExpanded: setExpanded
1409
- })))))));
1410
- };
1411
-
1412
- var Monogram = function Monogram(_ref) {
1413
- var props = _extends({}, _ref);
1414
-
1415
- return /*#__PURE__*/React.createElement(Box, _extends({
1416
- as: "svg",
1417
- width: "80",
1418
- stroke: "none",
1419
- fill: "currentColor",
1420
- viewBox: "0 0 32 32"
1421
- }, props), /*#__PURE__*/React.createElement("path", {
1422
- d: "M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z"
1423
- }), /*#__PURE__*/React.createElement("path", {
1424
- d: "M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4"
1425
- }), /*#__PURE__*/React.createElement("path", {
1426
- d: "M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15"
1427
- }));
1428
- };
1429
-
1430
- var Footer = function Footer() {
1431
- return /*#__PURE__*/React.createElement(Box, {
1432
- sx: {
1433
- mt: [7, 7, 7, 8],
1434
- mb: [7, 7, 7, 8],
1435
- pb: [2, 1, 0, 0]
1436
- }
1437
- }, /*#__PURE__*/React.createElement(Row, {
1438
- sx: {
1439
- mb: [0, 0, 4, 5]
1440
- }
1441
- }, /*#__PURE__*/React.createElement(Column, {
1442
- start: [1, 2],
1443
- width: [3, 3]
1444
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1445
- sx: {
1446
- fontSize: [2, 2, 2, 3],
1447
- fontFamily: 'heading',
1448
- letterSpacing: 'mono',
1449
- mb: [2]
1450
- }
1451
- }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
1452
- href: "mailto:hello@carbonplan.org",
1453
- sx: {
1454
- textDecoration: 'none',
1455
- fontSize: [2, 2, 2, 3]
1456
- }
1457
- }, "hello@carbonplan.org"))), /*#__PURE__*/React.createElement(Column, {
1458
- start: [5],
1459
- width: [1],
1460
- dl: 1,
1461
- dr: 1,
1462
- sx: {
1463
- display: ['flex', 'none', 'none', 'none'],
1464
- justifyContent: ['center']
1465
- }
1466
- }, /*#__PURE__*/React.createElement(Monogram, {
1467
- sx: {
1468
- mt: ['-4px'],
1469
- width: '60px',
1470
- height: '60px'
1471
- }
1472
- })), /*#__PURE__*/React.createElement(Column, {
1473
- start: [1, 5, 5, 5],
1474
- width: [3, 3],
1475
- sx: {
1476
- mt: [3, 0, 0, 0]
1477
- }
1478
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1479
- sx: {
1480
- fontSize: [2, 2, 2, 3],
1481
- fontFamily: 'heading',
1482
- letterSpacing: 'mono',
1483
- mb: [2]
1484
- }
1485
- }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
1486
- href: "https://twitter.com/carbonplanorg",
1487
- sx: {
1488
- textDecoration: 'none',
1489
- fontSize: [2, 2, 2, 3]
1490
- }
1491
- }, "@carbonplanorg"))), /*#__PURE__*/React.createElement(Column, {
1492
- start: [1, 9],
1493
- width: [5, 4, 3, 3],
1494
- sx: {
1495
- mt: ['42px', '42px', 0, 0],
1496
- mb: [3, 3, 0, 0]
1497
- }
1498
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1499
- sx: {
1500
- fontSize: [2, 2, 2, 3],
1501
- fontFamily: 'body',
1502
- color: 'secondary'
1503
- }
1504
- }, "CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))), /*#__PURE__*/React.createElement(Row, {
1505
- sx: {
1506
- mb: ['2px'],
1507
- mt: [5, 5, 4]
1508
- }
1509
- }, /*#__PURE__*/React.createElement(Column, {
1510
- start: [1, 1, 2, 2],
1511
- width: [3, 2, 3, 3],
1512
- sx: {
1513
- display: 'flex',
1514
- alignItems: ['flex-start', 'flex-start', 'flex-end']
1515
- }
1516
- }, /*#__PURE__*/React.createElement(Box, {
1517
- sx: {
1518
- bottom: '0px',
1519
- borderStyle: 'solid',
1520
- borderColor: 'muted',
1521
- borderWidth: '0px',
1522
- borderTopWidth: '1px',
1523
- pt: [2]
1524
- }
1525
- }, /*#__PURE__*/React.createElement(Box, {
1526
- sx: {
1527
- color: 'secondary',
1528
- fontSize: [1, 1, 1, 2],
1529
- fontFamily: 'mono',
1530
- letterSpacing: 'mono'
1531
- }
1532
- }, "(c) 2021 CARBONPLAN"))), /*#__PURE__*/React.createElement(Column, {
1533
- start: [4, 3, 5, 5],
1534
- width: [2, 2, 3, 3],
1535
- sx: {
1536
- display: 'flex',
1537
- alignItems: ['flex-start', 'flex-start', 'flex-end'],
1538
- mt: [0, 0, 0, 0]
1539
- }
1540
- }, /*#__PURE__*/React.createElement(Box, {
1541
- sx: {
1542
- bottom: '0px',
1543
- borderStyle: 'solid',
1544
- borderColor: 'muted',
1545
- borderWidth: '0px',
1546
- borderTopWidth: '1px',
1547
- width: ['100%', 'auto', 'auto', 'auto'],
1548
- pt: [2]
1549
- }
1550
- }, /*#__PURE__*/React.createElement(NextLink, {
1551
- href: "/terms",
1552
- passHref: true
1553
- }, /*#__PURE__*/React.createElement(Box, {
1554
- as: "a",
1555
- sx: {
1556
- textDecoration: 'none',
1557
- fontSize: [1, 1, 1, 2],
1558
- color: 'secondary',
1559
- fontFamily: 'mono',
1560
- letterSpacing: 'mono',
1561
- display: 'block'
1562
- }
1563
- }, "READ OUR TERMS")))), /*#__PURE__*/React.createElement(Column, {
1564
- start: [5, 7, 9, 9],
1565
- width: [2, 3, 3, 3],
1566
- sx: {
1567
- display: ['none', 'initial', 'initial', 'initial']
1568
- }
1569
- }, /*#__PURE__*/React.createElement(Monogram, {
1570
- sx: {
1571
- width: 80,
1572
- height: 80,
1573
- mt: [0, '-10px', 4, 5],
1574
- mb: ['-12px']
1575
- }
1576
- }))));
1577
- };
1578
-
1579
- var _excluded$8 = ["sx"];
1580
-
1581
- var Dimmer = function Dimmer(_ref) {
1582
- var sx = _ref.sx,
1583
- props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
1584
-
1585
- var _useColorMode = useColorMode(),
1586
- colorMode = _useColorMode[0],
1587
- setColorMode = _useColorMode[1];
1588
-
1589
- var toggle = useCallback(function () {
1590
- setColorMode(colorMode === 'light' ? 'dark' : 'light');
1591
- }, [colorMode]);
1592
- return /*#__PURE__*/React.createElement(IconButton, _extends({
1593
- "aria-label": "Toggle dark mode",
1594
- onClick: toggle,
1595
- role: "checkbox",
1596
- sx: _extends({
1597
- width: 32,
1598
- height: 32,
1599
- display: 'inline-block',
1600
- cursor: 'pointer',
1601
- color: 'secondary'
1602
- }, sx)
1603
- }, props), /*#__PURE__*/React.createElement(Sun, {
1604
- sx: {
1605
- strokeWidth: '1.75',
1606
- transition: 'stroke 0.15s',
1607
- '@media (hover: hover) and (pointer: fine)': {
1608
- '&:hover': {
1609
- stroke: 'primary'
1610
- }
1611
- }
1612
- }
1613
- }));
1614
- };
1615
-
1616
- var GitSha = function GitSha() {
1617
- var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
1618
- var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
1619
- var slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
1620
-
1621
- var _useThemeUI = useThemeUI(),
1622
- theme = _useThemeUI.theme;
1623
-
1624
- var color = theme.rawColors.secondary;
1625
-
1626
- if (sha && owner && slug) {
1627
- var shortSha = sha.substring(0, 7);
1628
- var href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
1629
- return /*#__PURE__*/React.createElement(Box, {
1630
- sx: {
1631
- display: 'inline-block',
1632
- width: '87px'
1633
- }
1634
- }, /*#__PURE__*/React.createElement(Separator, {
1635
- color: color
1636
- }), /*#__PURE__*/React.createElement(Link$2, {
1637
- href: href,
1638
- sx: {
1639
- whiteSpace: 'nowrap',
1640
- display: 'inline-block',
1641
- ml: [2],
1642
- fontFamily: 'mono',
1643
- letterSpacing: 'body',
1644
- color: color,
1645
- fontSize: [1],
1646
- textTransform: 'uppercase',
1647
- textDecoration: 'none'
1648
- }
1649
- }, shortSha));
1650
- } else {
1651
- // fallback
1652
- return /*#__PURE__*/React.createElement(Box, {
1653
- sx: {
1654
- display: 'inline-block',
1655
- width: '87px'
1656
- }
1657
- }, /*#__PURE__*/React.createElement(Separator, {
1658
- color: color
1659
- }), /*#__PURE__*/React.createElement(Text, {
1660
- sx: {
1661
- whiteSpace: 'nowrap',
1662
- display: 'inline-block',
1663
- ml: [2],
1664
- fontFamily: 'mono',
1665
- letterSpacing: 'body',
1666
- color: color,
1667
- fontSize: [1],
1668
- textTransform: 'uppercase'
1669
- }
1670
- }, color));
1671
- }
1672
- };
1673
-
1674
- var Separator = function Separator(_ref) {
1675
- var color = _ref.color;
1676
- return /*#__PURE__*/React.createElement("svg", {
1677
- fill: color,
1678
- opacity: "0.8",
1679
- viewBox: "0 0 24 24",
1680
- width: "24",
1681
- height: "24"
1682
- }, /*#__PURE__*/React.createElement("circle", {
1683
- r: 5,
1684
- cx: 19,
1685
- cy: 19
1686
- }));
1687
- };
1688
-
1689
- var Value = function Value(_ref) {
1690
- var mode = _ref.mode;
1691
-
1692
- var _useState = useState(init(mode)),
1693
- display = _useState[0],
1694
- setDisplay = _useState[1];
1695
-
1696
- useEffect(function () {
1697
- if (mode === 'mouse') {
1698
- var setFromEvent = function setFromEvent(e) {
1699
- var x = format(e.clientX, 4);
1700
- var y = format(e.clientY, 4);
1701
- setDisplay("X,Y: " + x + "," + y);
1702
- };
1703
-
1704
- window.addEventListener('mousemove', setFromEvent);
1705
- return function () {
1706
- window.removeEventListener('mousemove', setFromEvent);
1707
- };
1708
- }
1709
-
1710
- if (mode === 'scroll') {
1711
- var _setFromEvent = function _setFromEvent(e) {
1712
- var y = scrollFraction(window);
1713
- setDisplay("SCROLL: 0." + format((y * 100).toFixed(0), 2));
1714
- };
1715
-
1716
- window.addEventListener('scroll', _setFromEvent);
1717
- return function () {
1718
- window.removeEventListener('scroll', _setFromEvent);
1719
- };
1720
- }
1721
- }, []);
1722
- return /*#__PURE__*/React.createElement(Text, {
1723
- sx: {
1724
- whiteSpace: 'nowrap',
1725
- display: 'inline-block',
1726
- mr: '-6px',
1727
- fontFamily: 'mono',
1728
- letterSpacing: 'body',
1729
- color: 'secondary',
1730
- fontSize: [1],
1731
- textTransform: 'uppercase'
1732
- }
1733
- }, display);
1734
- };
1735
-
1736
- var Metadata = function Metadata(_ref2) {
1737
- var mode = _ref2.mode;
1738
- return /*#__PURE__*/React.createElement(Box, {
1739
- sx: {
1740
- userSelect: 'none',
1741
- position: 'fixed',
1742
- bottom: '42px',
1743
- right: '24px',
1744
- transformOrigin: 'right',
1745
- transform: 'rotate(90deg)',
1746
- display: ['none', 'none', 'initial']
1747
- }
1748
- }, /*#__PURE__*/React.createElement(Value, {
1749
- mode: mode
1750
- }), /*#__PURE__*/React.createElement(GitSha, null));
1751
- };
1752
-
1753
- function init(mode) {
1754
- if (mode === 'mouse') {
1755
- return "X,Y: " + format(0, 4) + "," + format(0, 4);
1756
- } else if (mode === 'scroll') {
1757
- return "SCROLL: 0." + format(0 .toFixed(0), 2);
1758
- } else {
1759
- return mode;
1760
- }
1761
- }
1762
-
1763
- function format(num, pad) {
1764
- return num.toString().padStart(pad, '0');
1765
- }
1766
-
1767
- function scrollFraction(window, documnt) {
1768
- return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
1769
- }
1770
-
1771
- var _excluded$7 = ["duration", "delay", "children"];
1772
- var fade = keyframes({
1773
- from: {
1774
- opacity: 0
1775
- },
1776
- to: {
1777
- opacity: 1
1778
- }
1779
- });
1780
-
1781
- var FadeIn = function FadeIn(_ref) {
1782
- var _ref$duration = _ref.duration,
1783
- duration = _ref$duration === void 0 ? 300 : _ref$duration,
1784
- _ref$delay = _ref.delay,
1785
- delay = _ref$delay === void 0 ? 0 : _ref$delay,
1786
- children = _ref.children,
1787
- delegated = _objectWithoutPropertiesLoose(_ref, _excluded$7);
1788
-
1789
- return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
1790
- sx: {
1791
- animationDuration: duration + 'ms',
1792
- animationDelay: delay + 'ms',
1793
- animationName: fade.toString(),
1794
- animationFillMode: 'backwards'
1795
- }
1796
- }), children);
1797
- };
1798
-
1799
- var getScrollbarWidth = function getScrollbarWidth(document) {
1800
- var outer = document.createElement('div');
1801
- outer.style.visibility = 'hidden';
1802
- outer.style.width = '100px';
1803
- document.body.appendChild(outer);
1804
- outer.style.overflow = 'scroll';
1805
- var inner = document.createElement('div');
1806
- inner.style.width = '100%';
1807
- outer.appendChild(inner);
1808
- var delta = outer.offsetWidth - inner.offsetWidth;
1809
- outer.parentNode.removeChild(outer);
1810
- return delta;
1811
- };
1812
-
1813
- var Scrollbar = function Scrollbar() {
1814
- useEffect(function () {
1815
- if (typeof document !== 'undefined') {
1816
- var delta = getScrollbarWidth(document);
1817
-
1818
- if (delta > 0) {
1819
- document.body.classList.add('custom-scrollbar');
1820
- document.getElementsByTagName('html')[0].classList.add('custom-scrollbar');
1821
- }
1822
- }
1823
- }, []);
1824
- return null;
1825
- };
1826
-
1827
- var Guide = function Guide(_ref) {
1828
- var _ref$color = _ref.color,
1829
- color = _ref$color === void 0 ? 'muted' : _ref$color;
1830
-
1831
- var _useState = useState(false),
1832
- display = _useState[0],
1833
- setDisplay = _useState[1];
1834
-
1835
- useEffect(function () {
1836
- function handler(event) {
1837
- var key = event.key,
1838
- metaKey = event.metaKey;
1839
-
1840
- if (key === ';' && metaKey) {
1841
- setDisplay(function (prev) {
1842
- return !prev;
1843
- });
1844
- }
1845
- }
1846
-
1847
- document.addEventListener('keydown', handler);
1848
- return function () {
1849
- document.removeEventListener('keydown', handler);
1850
- };
1851
- }, []);
1852
- return /*#__PURE__*/React.createElement(Box, {
1853
- sx: {
1854
- position: 'fixed',
1855
- width: '100%',
1856
- left: 0,
1857
- top: 0,
1858
- zIndex: color === 'teal' ? 5000 : -1,
1859
- pointerEvents: 'none',
1860
- display: display ? 'initial' : 'none'
1861
- }
1862
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
1863
- sx: {
1864
- display: ['none', 'none', 'initial', 'initial']
1865
- }
1866
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1867
- indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
1868
- color: color
1869
- })), /*#__PURE__*/React.createElement(Box, {
1870
- sx: {
1871
- display: ['none', 'initial', 'none', 'none']
1872
- }
1873
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1874
- indices: [1, 2, 3, 4, 5, 6, 7, 8],
1875
- color: color
1876
- })), /*#__PURE__*/React.createElement(Box, {
1877
- sx: {
1878
- display: ['initial', 'none', 'none', 'none']
1879
- }
1880
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1881
- indices: [1, 2, 3, 4, 5, 6],
1882
- color: color
1883
- }))));
1884
- };
1885
-
1886
- var colorCycle = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'pink'];
1887
-
1888
- function GuideColumns(_ref2) {
1889
- var indices = _ref2.indices,
1890
- color = _ref2.color;
1891
- var sx = {
1892
- outerGuideColumn: {
1893
- borderStyle: 'solid',
1894
- borderWidth: '0px',
1895
- borderLeftWidth: color === 'teal' ? '0px' : '1px',
1896
- borderRightWidth: color === 'teal' ? '0px' : '1px',
1897
- opacity: color == 'teal' ? 0.4 : 1
1898
- },
1899
- innerGuideColumn: {
1900
- borderStyle: 'solid',
1901
- borderWidth: '0px',
1902
- borderLeftWidth: '0px',
1903
- borderRightWidth: '0px',
1904
- opacity: color == 'teal' ? 0.4 : 1
1905
- }
1906
- };
1907
- return /*#__PURE__*/React.createElement(Row, null, indices.map(function (i) {
1908
- return /*#__PURE__*/React.createElement(Column, {
1909
- key: i,
1910
- start: [i],
1911
- width: [1, 1],
1912
- dl: 0.5,
1913
- dr: 0.5,
1914
- sx: _extends({
1915
- bg: color === 'teal' ? 'teal' : 'transparent',
1916
- height: '100vh'
1917
- }, sx.innerGuideColumn)
1918
- }, /*#__PURE__*/React.createElement(Box, {
1919
- sx: _extends({
1920
- mx: ['12px', 3, 3, 4],
1921
- bg: color === 'teal' ? 'background' : 'transparent',
1922
- height: '100%',
1923
- borderLeftColor: color === 'rainbow' ? colorCycle[i % 8] : 'muted',
1924
- borderRightColor: color === 'rainbow' ? colorCycle[i % 8] : 'muted'
1925
- }, sx.outerGuideColumn)
1926
- }));
1927
- }));
1928
- }
1929
-
1930
- var _excluded$6 = ["value", "sx"];
1931
-
1932
- var Settings = function Settings(_ref) {
1933
- var value = _ref.value,
1934
- sx = _ref.sx,
1935
- props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
1936
-
1937
- return /*#__PURE__*/React.createElement(IconButton, _extends({
1938
- sx: _extends({
1939
- cursor: 'pointer',
1940
- fill: 'none',
1941
- strokeWidth: '2px',
1942
- stroke: 'text',
1943
- '.paren': {
1944
- opacity: '0'
1945
- },
1946
- '@media (hover: hover) and (pointer: fine)': {
1947
- '&:hover .paren': {
1948
- opacity: '1'
1949
- }
1950
- }
1951
- }, sx),
1952
- "aria-label": "Toggle Menu"
1953
- }, props), !value && /*#__PURE__*/React.createElement("svg", {
1954
- style: {
1955
- width: '50px',
1956
- height: '30px',
1957
- transform: 'scale(2)',
1958
- marginTop: '-3px'
1959
- },
1960
- xmlns: "http://www.w3.org/2000/svg",
1961
- viewBox: "0 0 68 36"
1962
- }, /*#__PURE__*/React.createElement("line", {
1963
- x1: "24",
1964
- y1: "2.1",
1965
- x2: "24",
1966
- y2: "6.1"
1967
- }), /*#__PURE__*/React.createElement("line", {
1968
- x1: "24",
1969
- y1: "24.1",
1970
- x2: "24",
1971
- y2: "33.9"
1972
- }), /*#__PURE__*/React.createElement("line", {
1973
- x1: "44",
1974
- y1: "2.1",
1975
- x2: "44",
1976
- y2: "12.1"
1977
- }), /*#__PURE__*/React.createElement("line", {
1978
- x1: "44",
1979
- y1: "30.1",
1980
- x2: "44",
1981
- y2: "33.9"
1982
- }), /*#__PURE__*/React.createElement("circle", {
1983
- cx: "24",
1984
- cy: "15.1",
1985
- r: "5"
1986
- }), /*#__PURE__*/React.createElement("circle", {
1987
- cx: "44",
1988
- cy: "21.1",
1989
- r: "5"
1990
- }), /*#__PURE__*/React.createElement("path", {
1991
- style: {
1992
- transition: 'all 0.2s'
1993
- },
1994
- className: "paren",
1995
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
1996
- }), /*#__PURE__*/React.createElement("path", {
1997
- style: {
1998
- transition: 'all 0.2s'
1999
- },
2000
- className: "paren",
2001
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
2002
- })), value && /*#__PURE__*/React.createElement("svg", {
2003
- style: {
2004
- width: '50px',
2005
- height: '30px',
2006
- transform: 'scale(2)',
2007
- marginTop: '-3px'
2008
- },
2009
- xmlns: "http://www.w3.org/2000/svg",
2010
- viewBox: "0 0 68 36"
2011
- }, /*#__PURE__*/React.createElement("line", {
2012
- x1: "50.85",
2013
- y1: "29.79",
2014
- x2: "17.15",
2015
- y2: "6.21"
2016
- }), /*#__PURE__*/React.createElement("line", {
2017
- x1: "17.15",
2018
- y1: "29.79",
2019
- x2: "50.85",
2020
- y2: "6.21"
2021
- }), /*#__PURE__*/React.createElement("path", {
2022
- style: {
2023
- transition: 'all 0.2s'
2024
- },
2025
- className: "paren",
2026
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
2027
- }), /*#__PURE__*/React.createElement("path", {
2028
- style: {
2029
- transition: 'all 0.2s'
2030
- },
2031
- className: "paren",
2032
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
2033
- })));
2034
- };
2035
-
2036
- var Layout = function Layout(_ref) {
2037
- var title = _ref.title,
2038
- description = _ref.description,
2039
- card = _ref.card,
2040
- children = _ref.children,
2041
- status = _ref.status,
2042
- nav = _ref.nav,
2043
- settings = _ref.settings,
2044
- _ref$footer = _ref.footer,
2045
- footer = _ref$footer === void 0 ? true : _ref$footer,
2046
- _ref$header = _ref.header,
2047
- header = _ref$header === void 0 ? true : _ref$header,
2048
- _ref$metadata = _ref.metadata,
2049
- metadata = _ref$metadata === void 0 ? 'mouse' : _ref$metadata,
2050
- _ref$links = _ref.links,
2051
- links = _ref$links === void 0 ? 'remote' : _ref$links,
2052
- _ref$dimmer = _ref.dimmer,
2053
- dimmer = _ref$dimmer === void 0 ? 'bottom' : _ref$dimmer,
2054
- _ref$guide = _ref.guide,
2055
- guide = _ref$guide === void 0 ? true : _ref$guide,
2056
- _ref$scrollbar = _ref.scrollbar,
2057
- scrollbar = _ref$scrollbar === void 0 ? true : _ref$scrollbar,
2058
- _ref$fade = _ref.fade,
2059
- fade = _ref$fade === void 0 ? true : _ref$fade,
2060
- _ref$container = _ref.container,
2061
- container = _ref$container === void 0 ? true : _ref$container;
2062
- var content = children;
2063
-
2064
- if (fade) {
2065
- content = /*#__PURE__*/React.createElement(FadeIn, {
2066
- duration: 250
2067
- }, content);
2068
- }
2069
-
2070
- if (container) {
2071
- content = /*#__PURE__*/React.createElement(Box, {
2072
- sx: {
2073
- mb: [8, 8, 9, 10]
2074
- }
2075
- }, /*#__PURE__*/React.createElement(Container, null, content));
2076
- }
2077
-
2078
- var _useThemeUI = useThemeUI(),
2079
- theme = _useThemeUI.theme;
2080
-
2081
- useEffect(function () {
2082
- if (!theme) return;
2083
-
2084
- var handler = function handler(e) {
2085
- if (e.matches && settings != null && settings.value && settings != null && settings.onClick) {
2086
- settings == null ? void 0 : settings.onClick();
2087
- }
2088
- };
2089
-
2090
- var query = window.matchMedia("(min-width: " + theme.breakpoints[1] + ")");
2091
- query.onchange = handler;
2092
- return function () {
2093
- query.onchange = null;
2094
- };
2095
- }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
2096
- var menuItems = [/*#__PURE__*/React.createElement(Dimmer, {
2097
- key: "dimmer",
2098
- sx: {
2099
- color: 'primary',
2100
- mt: '-2px',
2101
- display: ['block', 'block', dimmer === 'top' ? 'block' : 'none', dimmer === 'top' ? 'block' : 'none']
2102
- }
2103
- })];
2104
-
2105
- if (settings) {
2106
- menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
2107
- key: "settings",
2108
- sx: {
2109
- mr: ['2px'],
2110
- display: ['inherit', 'inherit', 'none', 'none']
2111
- }
2112
- }, settings)));
2113
- }
2114
-
2115
- return /*#__PURE__*/React.createElement(React.Fragment, null, guide && /*#__PURE__*/React.createElement(Guide, {
2116
- color: guide
2117
- }), scrollbar && /*#__PURE__*/React.createElement(Scrollbar, null), /*#__PURE__*/React.createElement(Meta, {
2118
- card: card,
2119
- description: description,
2120
- title: title
2121
- }), /*#__PURE__*/React.createElement(Flex, {
2122
- sx: {
2123
- flexDirection: 'column',
2124
- minHeight: '100vh'
2125
- }
2126
- }, header && /*#__PURE__*/React.createElement(Box, {
2127
- as: "header",
2128
- sx: {
2129
- width: '100%',
2130
- borderStyle: 'solid',
2131
- borderColor: 'muted',
2132
- borderWidth: '0px',
2133
- borderBottomWidth: '1px',
2134
- position: 'sticky',
2135
- top: 0,
2136
- bg: 'background',
2137
- height: '56px',
2138
- zIndex: 2000
2139
- }
2140
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
2141
- mode: links,
2142
- status: status,
2143
- nav: nav,
2144
- menuItems: menuItems
2145
- }))), /*#__PURE__*/React.createElement(Box, {
2146
- sx: {
2147
- width: '100%',
2148
- flex: '1 1 auto'
2149
- }
2150
- }, content), footer && /*#__PURE__*/React.createElement(Box, {
2151
- as: "footer",
2152
- sx: {
2153
- width: '100%',
2154
- borderStyle: 'solid',
2155
- borderColor: 'muted',
2156
- borderWidth: '0px',
2157
- borderTopWidth: '1px'
2158
- }
2159
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Footer, null))), dimmer === 'bottom' && /*#__PURE__*/React.createElement(Box, {
2160
- sx: {
2161
- display: ['none', 'none', 'initial', 'initial'],
2162
- position: ['fixed'],
2163
- right: [13],
2164
- bottom: [17, 17, 15, 15]
2165
- }
2166
- }, /*#__PURE__*/React.createElement(Dimmer, null)), metadata && /*#__PURE__*/React.createElement(Metadata, {
2167
- mode: metadata
2168
- })));
2169
- };
2170
-
2171
- var Custom404 = function Custom404() {
2172
- return /*#__PURE__*/React.createElement(Layout, {
2173
- footer: false,
2174
- title: '404 / carbonplan'
2175
- }, /*#__PURE__*/React.createElement(Row, {
2176
- sx: {
2177
- mb: [5, 0, 0],
2178
- pt: [0, 0, 6]
2179
- }
2180
- }, /*#__PURE__*/React.createElement(Column, {
2181
- start: [1, 1, 3, 3],
2182
- width: [6, 4, 4, 4]
2183
- }, /*#__PURE__*/React.createElement(Styled.h1, null, "Oops!"), /*#__PURE__*/React.createElement(Box, {
2184
- sx: {
2185
- fontSize: [4, 4, 4, 5],
2186
- lineHeight: 'h3',
2187
- mt: [3, 4, 4],
2188
- mb: [2, 3, 3],
2189
- maxWidth: ['90%', '90%', '400px']
2190
- }
2191
- }, "Sorry but we can't seem to find the page you are looking for."), /*#__PURE__*/React.createElement(Box, {
2192
- sx: {
2193
- color: 'secondary',
2194
- fontFamily: 'mono',
2195
- letterSpacing: 'mono',
2196
- fontSize: [2, 2, 2, 3],
2197
- mt: [4, 5, 5]
2198
- }
2199
- }, "ERROR CODE 404")), /*#__PURE__*/React.createElement(Column, {
2200
- start: [2, 5, 7, 7],
2201
- width: [4, 4, 4, 4]
2202
- }, /*#__PURE__*/React.createElement(Box, {
2203
- sx: {
2204
- width: ['100%'],
2205
- mt: [2, 4, 4, 5],
2206
- fill: 'primary'
2207
- }
2208
- }, /*#__PURE__*/React.createElement(PoopSad, {
2209
- sx: {
2210
- width: '100%',
2211
- height: 'auto'
2212
- }
2213
- })))));
2214
- };
2215
-
2216
- var Expander = function Expander(_ref) {
2217
- var value = _ref.value,
2218
- id = _ref.id,
2219
- onClick = _ref.onClick,
2220
- sx = _ref.sx;
2221
- return /*#__PURE__*/React.createElement(IconButton, {
2222
- onClick: onClick,
2223
- id: id,
2224
- role: "checkbox",
2225
- "aria-checked": value,
2226
- "aria-label": "Expand",
2227
- sx: _extends({
2228
- display: 'inline-block',
2229
- width: 24,
2230
- height: 24,
2231
- p: [1],
2232
- cursor: 'pointer',
2233
- fill: 'secondary',
2234
- stroke: 'secondary',
2235
- '@media (hover: hover) and (pointer: fine)': {
2236
- '&:hover': {
2237
- fill: 'primary',
2238
- stroke: 'primary'
2239
- }
2240
- }
2241
- }, sx)
2242
- }, /*#__PURE__*/React.createElement("svg", {
2243
- viewBox: "0 0 16 16"
2244
- }, /*#__PURE__*/React.createElement("path", {
2245
- d: "M8,0 V16 M0,8 H16",
2246
- style: {
2247
- strokeWidth: 2,
2248
- transition: '0.25s all',
2249
- transformOrigin: '8px 8px',
2250
- transform: value ? 'rotate(45deg)' : ''
2251
- }
2252
- })));
2253
- };
2254
-
2255
- var _excluded$5 = ["label", "value", "sx", "children"];
2256
-
2257
- var Tag = function Tag(_ref) {
2258
- var label = _ref.label,
2259
- value = _ref.value,
2260
- sx = _ref.sx,
2261
- children = _ref.children,
2262
- props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
2263
-
2264
- var color = sx && sx.color ? sx.color : 'primary';
2265
- var isClickable = props && (props.onClick || props.onDoubleClick);
2266
- return /*#__PURE__*/React.createElement(Box, _extends({
2267
- as: isClickable ? 'button' : 'span',
2268
- role: "checkbox",
2269
- "aria-checked": value,
2270
- "aria-label": label,
2271
- sx: _extends({
2272
- display: 'inline-block',
2273
- fontSize: [1, 1, 1, 2],
2274
- fontFamily: 'mono',
2275
- letterSpacing: 'mono',
2276
- cursor: isClickable ? 'pointer' : 'inherit',
2277
- color: color,
2278
- backgroundColor: 'transparent',
2279
- borderStyle: 'solid',
2280
- borderColor: color,
2281
- lineHeight: 'body',
2282
- borderWidth: '0px',
2283
- borderBottomWidth: '1px',
2284
- textTransform: 'uppercase',
2285
- userSelect: 'none',
2286
- transition: 'opacity 0.05s',
2287
- pt: ['1px'],
2288
- pb: ['2px'],
2289
- px: [0],
2290
- m: [0],
2291
- opacity: value == null || value ? 1 : color == 'primary' ? 0.24 : 0.33
2292
- }, sx)
2293
- }, props), children);
2294
- };
2295
-
2296
- var _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
2297
- var sx = {
2298
- label: {
2299
- fontFamily: 'mono',
2300
- letterSpacing: 'mono',
2301
- fontSize: [1, 1, 1, 2],
2302
- color: 'secondary',
2303
- userSelect: 'none',
2304
- textTransform: 'uppercase'
2305
- }
2306
- };
2307
-
2308
- var duplicateOptions = function duplicateOptions(options, defaultValue, overrides) {
2309
- if (overrides === void 0) {
2310
- overrides = {};
2311
- }
2312
-
2313
- return Object.keys(options).reduce(function (o, key) {
2314
- var _Object$assign;
2315
-
2316
- return Object.assign(o, (_Object$assign = {}, _Object$assign[key] = overrides[key] || defaultValue, _Object$assign));
2317
- }, {});
2318
- };
2319
-
2320
- var isAll = function isAll(option) {
2321
- return Object.keys(option).filter(function (d) {
2322
- return option[d];
2323
- }).length == Object.keys(option).length;
2324
- };
2325
-
2326
- var updateValues = function updateValues(_ref) {
2327
- var values = _ref.values,
2328
- multiSelect = _ref.multiSelect,
2329
- setValues = _ref.setValues,
2330
- value = _ref.value;
2331
- var isAllAlreadySelected = isAll(values);
2332
- var isSelectingAll = value === 'all';
2333
- var updatedToggle;
2334
-
2335
- if (multiSelect) {
2336
- if (isSelectingAll && !isAllAlreadySelected) {
2337
- // select all
2338
- updatedToggle = duplicateOptions(values, true);
2339
- } else if (isSelectingAll && isAllAlreadySelected) {
2340
- // deselect all
2341
- updatedToggle = duplicateOptions(values, false);
2342
- } else {
2343
- var _extends2;
2344
-
2345
- // de/select value, inherit other values
2346
- updatedToggle = _extends({}, values, (_extends2 = {}, _extends2[value] = !values[value], _extends2));
2347
- }
2348
- } else {
2349
- if (isSelectingAll && !isAllAlreadySelected) {
2350
- // select all
2351
- updatedToggle = duplicateOptions(values, true);
2352
- } else if (isSelectingAll && isAllAlreadySelected) ; else {
2353
- var _duplicateOptions;
2354
-
2355
- // select only value
2356
- updatedToggle = duplicateOptions(values, false, (_duplicateOptions = {}, _duplicateOptions[value] = true, _duplicateOptions));
2357
- }
2358
- }
2359
-
2360
- if (updatedToggle) {
2361
- setValues(updatedToggle);
2362
- }
2363
- };
2364
-
2365
- var Filter = function Filter(_ref2) {
2366
- var values = _ref2.values,
2367
- setValues = _ref2.setValues,
2368
- label = _ref2.label,
2369
- colors = _ref2.colors,
2370
- _ref2$showAll = _ref2.showAll,
2371
- showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
2372
- _ref2$multiSelect = _ref2.multiSelect,
2373
- multiSelect = _ref2$multiSelect === void 0 ? false : _ref2$multiSelect,
2374
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
2375
-
2376
- return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
2377
- sx: sx.label
2378
- }, label), /*#__PURE__*/React.createElement(Box, {
2379
- sx: {
2380
- mt: label ? [3] : 0
2381
- }
2382
- }, showAll && /*#__PURE__*/React.createElement(Tag, {
2383
- onClick: function onClick() {
2384
- return updateValues({
2385
- values: values,
2386
- multiSelect: multiSelect,
2387
- setValues: setValues,
2388
- value: 'all'
2389
- });
2390
- },
2391
- value: isAll(values),
2392
- sx: {
2393
- mr: [2]
2394
- }
2395
- }, "All"), Object.keys(values).map(function (d, i) {
2396
- return /*#__PURE__*/React.createElement(Tag, {
2397
- onClick: function onClick() {
2398
- return updateValues({
2399
- values: values,
2400
- multiSelect: multiSelect,
2401
- setValues: setValues,
2402
- value: d
2403
- });
2404
- },
2405
- onDoubleClick: function onDoubleClick() {
2406
- return updateValues({
2407
- values: values,
2408
- multiSelect: false,
2409
- setValues: setValues,
2410
- value: d
2411
- });
2412
- },
2413
- key: i,
2414
- value: values[d],
2415
- sx: {
2416
- width: 'max-content',
2417
- color: colors ? colors[d] : 'primary',
2418
- mr: [2],
2419
- mb: [1]
2420
- }
2421
- }, d);
2422
- })));
2423
- };
2424
-
2425
- var sizes = {
2426
- xs: [1],
2427
- sm: [3],
2428
- md: [5],
2429
- lg: [7],
2430
- xl: [9]
2431
- };
2432
-
2433
- var Group = function Group(_ref) {
2434
- var children = _ref.children,
2435
- _ref$direction = _ref.direction,
2436
- direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
2437
- _ref$spacing = _ref.spacing,
2438
- spacing = _ref$spacing === void 0 ? 'md' : _ref$spacing;
2439
- var marginValue;
2440
-
2441
- if (typeof spacing === 'string') {
2442
- marginValue = sizes[spacing];
2443
- } else if (typeof spacing === 'number') {
2444
- marginValue = [spacing];
2445
- } else if (Array.isArray(spacing) && spacing.every(function (el) {
2446
- return typeof el === 'number';
2447
- })) {
2448
- marginValue = spacing;
2449
- }
2450
-
2451
- if (!marginValue) {
2452
- throw new Error('Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl');
2453
- }
2454
-
2455
- if (!['horizontal', 'vertical'].includes(direction)) {
2456
- throw new Error('Invalid direction value. Must be either horizontal or vertical');
2457
- }
2458
-
2459
- var marginProperty = direction === 'vertical' ? 'mt' : 'ml';
2460
- var additionalStyles = direction === 'horizontal' ? {
2461
- display: 'inline-block'
2462
- } : {};
2463
- return /*#__PURE__*/React.createElement(Box, null, React.Children.map(children, function (child, i) {
2464
- var _extends2;
2465
-
2466
- return /*#__PURE__*/React.createElement(Box, {
2467
- sx: _extends((_extends2 = {}, _extends2[marginProperty] = i > 0 ? marginValue : 0, _extends2), additionalStyles)
2468
- }, child);
2469
- }));
2470
- };
2471
-
2472
- var _excluded$3 = ["size", "inverted", "sx"];
2473
-
2474
- var Input = function Input(_ref, ref) {
2475
- var _extends2;
2476
-
2477
- var _ref$size = _ref.size,
2478
- size = _ref$size === void 0 ? 'sm' : _ref$size,
2479
- inverted = _ref.inverted,
2480
- sx = _ref.sx,
2481
- props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
2482
-
2483
- var defaultColor = inverted ? 'secondary' : 'primary';
2484
-
2485
- var styles = _extends((_extends2 = {
2486
- color: defaultColor,
2487
- borderColor: 'secondary',
2488
- borderStyle: 'solid',
2489
- borderWidth: '0px',
2490
- borderBottomWidth: '1px',
2491
- borderRadius: '0px',
2492
- transition: 'border 0.15s'
2493
- }, _extends2["borderBottomWidth"] = '1px', _extends2.width = 'calc(min(15ch, 100%))', _extends2.p = [0], _extends2.py = ['2px'], _extends2['input::-webkit-outer-spin-button'] = {
2494
- WebkitAppearance: 'none',
2495
- margin: 0
2496
- }, _extends2['input::-webkit-inner-spin-button'] = {
2497
- WebkitAppearance: 'none',
2498
- margin: 0
2499
- }, _extends2[':focus'] = {
2500
- borderColor: 'primary'
2501
- }, _extends2[':focus-visible'] = {
2502
- outline: 'none !important',
2503
- background: 'none !important'
2504
- }, _extends2), getSizeStyles(size), sx);
2505
-
2506
- return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
2507
- ref: ref,
2508
- sx: styles
2509
- }));
2510
- };
2511
-
2512
- var input = forwardRef(Input);
2513
-
2514
- var getProps = function getProps(test) {
2515
- return function (props) {
2516
- var next = {};
2517
-
2518
- for (var key in props) {
2519
- if (test(key || '')) next[key] = props[key];
2520
- }
2521
-
2522
- return next;
2523
- };
2524
- };
2525
-
2526
- var _excluded$2 = ["children", "size", "sx", "sxSelect"];
2527
-
2528
- var Select = function Select(_ref) {
2529
- var _extends2;
2530
-
2531
- var children = _ref.children,
2532
- _ref$size = _ref.size,
2533
- size = _ref$size === void 0 ? 'sm' : _ref$size,
2534
- sx = _ref.sx,
2535
- sxSelect = _ref.sxSelect,
2536
- props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
2537
-
2538
- var color = sx && sx.color ? sx.color : 'primary';
2539
- var sizeStyles = getSizeStyles(size);
2540
- var ref = useRef(null);
2541
- var _onChange = props.onChange;
2542
- var omitOnChange = getProps(function (k) {
2543
- return k !== 'onChange';
2544
- })(props);
2545
-
2546
- if (!['xs', 'sm', 'md'].includes(size)) {
2547
- throw new Error('Size must be xs, sm, or md');
2548
- }
2549
-
2550
- var pr, height, width, ml, top;
2551
-
2552
- if (size === 'xs') {
2553
- height = [14, 14, 14, 16];
2554
- width = [14, 14, 14, 14];
2555
- top = ['1px'];
2556
- ml = ['-14px', '-14px', '-14px', '-16px'];
2557
- }
2558
-
2559
- if (size === 'sm') {
2560
- height = [15, 15, 15, 20];
2561
- width = [15, 15, 15, 20];
2562
- top = ['1px'];
2563
- ml = ['-16px', '-16px', '-16px', '-20px'];
2564
- }
2565
-
2566
- if (size === 'md') {
2567
- height = [20, 20, 20, 20];
2568
- width = [20, 20, 20, 20];
2569
- top = ['2px'];
2570
- ml = ['-20px', '-20px', '-20px', '-20px'];
2571
- }
2572
-
2573
- pr = width.map(function (d) {
2574
- return d + 12;
2575
- });
2576
- return /*#__PURE__*/React.createElement(Box, {
2577
- sx: _extends({
2578
- display: 'inline-block'
2579
- }, sx)
2580
- }, /*#__PURE__*/React.createElement(Box, _extends({
2581
- as: "select",
2582
- ref: ref,
2583
- onChange: function onChange(e) {
2584
- ref.current.blur();
2585
- if (_onChange) _onChange(e);
2586
- },
2587
- sx: _extends({}, sizeStyles, (_extends2 = {
2588
- lineHeight: 'normal',
2589
- cursor: 'pointer',
2590
- WebkitAppearance: 'none',
2591
- MozAppearance: 'none',
2592
- pb: ['5px'],
2593
- bg: 'transparent',
2594
- pr: pr,
2595
- border: 'none',
2596
- borderBottomStyle: 'solid',
2597
- borderBottomWidth: '1px',
2598
- borderBottomColor: 'primary',
2599
- borderRadius: '0px',
2600
- color: 'text',
2601
- width: 'fit-content'
2602
- }, _extends2["color"] = color, _extends2.userSelect = 'none', _extends2['@media (hover: none) and (pointer: coarse)'] = {
2603
- '&:focus-visible': {
2604
- outline: 'none !important',
2605
- background: 'transparent !important'
2606
- }
2607
- }, _extends2), sxSelect)
2608
- }, omitOnChange), children), /*#__PURE__*/React.createElement(Arrow, {
2609
- sx: {
2610
- width: width,
2611
- height: height,
2612
- position: 'relative',
2613
- ml: ml,
2614
- top: top,
2615
- fill: 'secondary',
2616
- transform: 'rotate(135deg)',
2617
- pointerEvents: 'none'
2618
- }
2619
- }));
2620
- };
2621
-
2622
- var _excluded$1 = ["sx"];
2623
-
2624
- var Slider = function Slider(_ref, ref) {
2625
- var sx = _ref.sx,
2626
- props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
2627
-
2628
- var color = sx && sx.color ? sx.color : 'primary';
2629
-
2630
- var _useThemeUI = useThemeUI(),
2631
- colors = _useThemeUI.theme.rawColors;
2632
-
2633
- return /*#__PURE__*/React.createElement(Slider$1, _extends({
2634
- ref: ref,
2635
- sx: _extends({
2636
- '&::-webkit-slider-thumb': {
2637
- height: [22, 18, 16],
2638
- width: [22, 18, 16],
2639
- boxShadow: "0 0 0 0px " + colors.secondary,
2640
- transition: 'box-shadow .15s ease'
2641
- },
2642
- '&::-moz-range-thumb': {
2643
- height: [22, 18, 16],
2644
- width: [22, 18, 16],
2645
- boxShadow: "0 0 0 0px " + colors.secondary,
2646
- transition: 'box-shadow .15s ease'
2647
- },
2648
- ':focus-visible': {
2649
- outline: 'none !important',
2650
- background: colors.secondary + " !important"
2651
- },
2652
- ':focus': {
2653
- color: color,
2654
- '&::-webkit-slider-thumb': {
2655
- boxShadow: "0 0 0 4px " + colors.secondary
2656
- },
2657
- '&::-moz-range-thumb': {
2658
- boxShadow: "0 0 0 4px " + colors.secondary
2659
- }
2660
- },
2661
- color: color
2662
- }, sx)
2663
- }, props));
2664
- };
2665
-
2666
- var slider = forwardRef(Slider);
2667
-
2668
- var styles = {
2669
- reset: {
2670
- verticalAlign: 'baseline',
2671
- border: 0,
2672
- outline: 0,
2673
- margin: 0,
2674
- padding: 0
2675
- },
2676
- row: {
2677
- borderStyle: 'solid',
2678
- borderWidth: '0px',
2679
- borderTopWidth: '1px',
2680
- borderColor: 'muted',
2681
- pt: [3, 3, 3, '20px'],
2682
- pb: [3, 3, 3, '20px'],
2683
- mb: ['2px']
2684
- },
2685
- header: {
2686
- display: 'block',
2687
- textTransform: 'uppercase',
2688
- letterSpacing: 'smallcaps',
2689
- fontFamily: 'heading',
2690
- fontSize: [2, 2, 2, 3]
2691
- },
2692
- index: {
2693
- display: 'block',
2694
- textTransform: 'uppercase',
2695
- letterSpacing: 'smallcaps',
2696
- fontFamily: 'heading',
2697
- fontSize: [2, 2, 2, 3]
2698
- },
2699
- entry: {
2700
- display: 'block',
2701
- fontSize: [2, 2, 2, 3],
2702
- fontFamily: 'faux',
2703
- letterSpacing: 'faux',
2704
- mb: ['1px'],
2705
- mt: [2, 0, 0, 0]
2706
- }
2707
- };
2708
-
2709
- var Table = function Table(_ref) {
2710
- var data = _ref.data,
2711
- sx = _ref.sx,
2712
- color = _ref.color,
2713
- header = _ref.header,
2714
- columns = _ref.columns,
2715
- start = _ref.start,
2716
- width = _ref.width,
2717
- _ref$index = _ref.index,
2718
- index = _ref$index === void 0 ? true : _ref$index,
2719
- _ref$borderBottom = _ref.borderBottom,
2720
- borderBottom = _ref$borderBottom === void 0 ? true : _ref$borderBottom,
2721
- _ref$borderTop = _ref.borderTop,
2722
- borderTop = _ref$borderTop === void 0 ? true : _ref$borderTop;
2723
-
2724
- if (!start || !columns || !width) {
2725
- throw new Error('Must provide columns, start, and width');
2726
- }
2727
-
2728
- return /*#__PURE__*/React.createElement(Box, {
2729
- as: "table",
2730
- sx: _extends({
2731
- display: 'block'
2732
- }, sx)
2733
- }, /*#__PURE__*/React.createElement(Box, {
2734
- as: "tbody",
2735
- sx: {
2736
- display: 'block'
2737
- }
2738
- }, header && /*#__PURE__*/React.createElement(Row, {
2739
- as: "tr",
2740
- sx: _extends({}, styles.reset, styles.header, styles.row, {
2741
- color: color,
2742
- borderTopWidth: !borderTop ? '0px' : '1px'
2743
- })
2744
- }, /*#__PURE__*/React.createElement(Column, {
2745
- as: "td",
2746
- start: [1],
2747
- width: columns,
2748
- sx: styles.index
2749
- }, header)), data.map(function (row, i) {
2750
- return /*#__PURE__*/React.createElement(Row, {
2751
- as: "tr",
2752
- columns: columns,
2753
- key: i,
2754
- sx: _extends({}, styles.reset, styles.row, {
2755
- pb: borderBottom && i === data.length - 1 ? ['18px', '18px', '18px', '22px'] : [3, 3, 3, '20px'],
2756
- borderBottomWidth: borderBottom && i === data.length - 1 ? '1px' : '0px',
2757
- borderTopWidth: !borderTop && i === 0 && !header ? '0px' : '1px'
2758
- })
2759
- }, row.map(function (column, j) {
2760
- return /*#__PURE__*/React.createElement(Column, {
2761
- as: "td",
2762
- key: j,
2763
- start: start[j],
2764
- width: width[j],
2765
- sx: j == 0 && index ? _extends({}, styles.reset, styles.index) : _extends({}, styles.reset, styles.entry)
2766
- }, column);
2767
- }));
2768
- })));
2769
- };
2770
-
2771
- var _excluded = ["value", "onClick", "disabled", "sx"];
2772
-
2773
- var Toggle = function Toggle(_ref, ref) {
2774
- var value = _ref.value,
2775
- onClick = _ref.onClick,
2776
- disabled = _ref.disabled,
2777
- sx = _ref.sx,
2778
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
2779
-
2780
- var color = sx && sx.color ? sx.color : 'primary';
2781
- value = disabled ? false : value;
2782
- return /*#__PURE__*/React.createElement(Box, _extends({
2783
- ref: ref,
2784
- as: "button",
2785
- onClick: onClick,
2786
- role: "checkbox",
2787
- "aria-checked": value,
2788
- "aria-label": "Toggle",
2789
- sx: _extends({
2790
- border: 'none',
2791
- background: 'none',
2792
- cursor: disabled ? 'default' : 'pointer',
2793
- p: [0],
2794
- m: [0],
2795
- display: 'inline-block'
2796
- }, sx)
2797
- }, props), /*#__PURE__*/React.createElement(Box, {
2798
- sx: {
2799
- width: '50px',
2800
- height: '20px',
2801
- borderRadius: '20px',
2802
- backgroundColor: value ? transparentize(color, color == 'primary' ? 0.5 : 0.45) : 'muted',
2803
- position: 'relative',
2804
- transition: '0.15s',
2805
- display: 'inline-block'
2806
- }
2807
- }, /*#__PURE__*/React.createElement(Box, {
2808
- sx: {
2809
- width: '14px',
2810
- height: '14px',
2811
- borderRadius: '7px',
2812
- position: 'absolute',
2813
- left: value ? '32px' : '4px',
2814
- top: '3px',
2815
- backgroundColor: value ? color : 'secondary',
2816
- transition: '0.15s'
2817
- }
2818
- })));
2819
- };
2820
-
2821
- var toggle = forwardRef(Toggle);
2822
-
2823
- var Tracking = function Tracking(_ref) {
2824
- var id = _ref.id;
2825
-
2826
- if (!id) {
2827
- return null;
2828
- }
2829
-
2830
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("script", {
2831
- async: true,
2832
- src: "https://www.googletagmanager.com/gtag/js?id=" + id
2833
- }), /*#__PURE__*/React.createElement("script", {
2834
- dangerouslySetInnerHTML: {
2835
- __html: "\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', '" + id + "', {\n page_path: window.location.pathname,\n });\n "
2836
- }
2837
- }));
2838
- };
2839
-
2840
- var Tray = function Tray(_ref) {
2841
- var expanded = _ref.expanded,
2842
- sx = _ref.sx,
2843
- children = _ref.children;
2844
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
2845
- sx: {
2846
- position: 'fixed',
2847
- top: '56px',
2848
- bottom: '0px',
2849
- left: '0px',
2850
- width: 'calc(100vw)',
2851
- mt: ['56px'],
2852
- bg: 'background',
2853
- zIndex: 1000,
2854
- transition: 'opacity 0.15s',
2855
- opacity: expanded ? 0.9 : 0,
2856
- pointerEvents: expanded ? 'all' : 'none'
2857
- }
2858
- }), /*#__PURE__*/React.createElement(Box, {
2859
- sx: _extends({
2860
- position: 'fixed',
2861
- width: 'calc(100vw)',
2862
- top: '0px',
2863
- mt: ['56px'],
2864
- pb: [6, 7, 7, 8],
2865
- pt: [5, 6, 7, 8],
2866
- bg: 'background',
2867
- zIndex: 1100,
2868
- borderStyle: 'solid',
2869
- borderColor: 'muted',
2870
- borderWidth: '0px',
2871
- borderBottomWidth: '1px',
2872
- transition: 'transform 0.15s',
2873
- ml: [-3, -4, -5, -6],
2874
- pl: [3, 4, 5, 6],
2875
- pr: [3, 4, 5, 6],
2876
- transform: expanded ? 'translateY(0)' : 'translateY(-100%)'
2877
- }, sx)
2878
- }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
2879
- start: [1, 1, 1, 1],
2880
- width: [6, 8, 10, 10]
2881
- }, children))));
2882
- };
2883
-
2884
- var defaultOptions = {
2885
- month: 'short',
2886
- day: 'numeric',
2887
- year: 'numeric'
2888
- };
2889
-
2890
- var formatDateElement = function formatDateElement(date, element, option) {
2891
- var _date$toLocaleString;
2892
-
2893
- if (!option) {
2894
- return null;
2895
- }
2896
-
2897
- var format = typeof option === 'string' ? option : defaultOptions[element];
2898
- var result = date.toLocaleString('default', (_date$toLocaleString = {}, _date$toLocaleString[element] = format, _date$toLocaleString));
2899
-
2900
- if (format === 'numeric' && element === 'day') {
2901
- return result.padStart(2, '0');
2902
- } else {
2903
- return result;
2904
- }
2905
- };
2906
-
2907
- var formatDate = function formatDate(date, options) {
2908
- if (options === void 0) {
2909
- options = defaultOptions;
2910
- }
2911
-
2912
- var d = new Date(date.replace(/-/g, '/'));
2913
- var month = formatDateElement(d, 'month', options.month);
2914
- var day = formatDateElement(d, 'day', options.day);
2915
- var year = formatDateElement(d, 'year', options.year);
2916
- return [month, day, year].filter(Boolean).join(' ');
2917
- };
2918
-
2919
- export { Badge, button as Button, callout as Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, input as Input, Layout, Link$1 as Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, slider as Slider, Table, Tag, toggle as Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
1
+ import e,{forwardRef as t,cloneElement as n,useRef as r,useState as o,useEffect as a,useCallback as i}from"react";import{Box as l,Link as c,Flex as s,Grid as m,IconButton as p,Container as d,useColorMode as u,useThemeUI as x,Text as h,Styled as f,Input as g,Slider as y}from"theme-ui";import{transparentize as b}from"@theme-ui/color";import E from"next/link";import{Arrow as v,Sun as w}from"@carbonplan/icons";import{PoopSad as k}from"@carbonplan/emoji";import C from"next/head";import{keyframes as S}from"@emotion/react";function z(){return z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},z.apply(this,arguments)}function M(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var A=["sx","children"],L=function(t){var n=t.sx,r=t.children,o=M(t,A),a=n&&n.color?n.color:"primary";return e.createElement(l,z({sx:z({display:"inline-block",width:"fit-content",height:["24px","24px","24px","26px"],borderRadius:"5px",backgroundColor:"primary"==a||"secondary"==a?"muted":b(a,.7),textAlign:"center",userSelect:"none",fontSize:[2,2,2,3]},n)},o),e.createElement(l,{sx:{letterSpacing:"0.02em",fontFamily:"mono",mt:["1px","1px","1px","0px"],px:[1,1,1,"5px"],color:a}},r))},W=["href","children","internal","tracking"],T=t(function(t,n){var r=t.href,o=t.children,a=t.internal,i=void 0!==a&&a,l=t.tracking,s=void 0!==l&&l,m=M(t,W);if(i||r&&r.startsWith("/"))return e.createElement(E,{href:r,passHref:!0},e.createElement(c,z({ref:n},m),o));if(s){var p,d;r&&r.includes("pdf")?(p="PDF",d="download"):(p="website",d="external");var u=function(e){!function(e){var t=e.action;"function"==typeof window.gtag?window.gtag("event",t,{event_category:e.category,event_label:e.label,value:e.value}):console.warn("Missing window.gtag, skipping analytics action: '"+t+"'.")}({action:p,category:d,label:r})};return e.createElement(c,z({ref:n,onClick:u,onContextMenu:u,href:r},m),o)}return e.createElement(c,z({ref:n,href:r},m),o)}),F=function(e){if(!["xs","sm","md","lg","xl"].includes(e))throw new Error("Size must be xs, sm, md, lg, or xl");var t,n,r,o;return"xs"===e&&(t=[2,2,2,3],n="body",r="body",o=[1.2]),"sm"===e&&(t=[3,3,3,4],n="body",r="body",o=[1.2]),"md"===e&&(t=[4,4,4,5],n="body",r="body",o=[1.2]),"lg"===e&&(t=[5,5,6,7],n="heading",r="heading",o=[1.2,1.2,1.25,1.25]),"xl"===e&&(t=[6,7,8,9],n="heading",r="heading",o=[1.25]),{fontSize:t,fontFamily:n,letterSpacing:r,lineHeight:o}},B=["size","prefix","suffix","inverted","sx","children","align","href","internal","tracking"],I=t(function(t,r){var o,a,i,c,s,m=t.size,p=void 0===m?"sm":m,d=t.prefix,u=t.suffix,x=t.inverted,h=t.sx,f=t.children,g=t.align,y=t.href,b=t.internal,E=t.tracking,v=M(t,B);if(!["xs","sm","md","lg","xl"].includes(p))throw new Error("Size must be xs, sm, md, lg, or xl");var w,k,C,S,A,L,W=h&&h.color?h.color:null,I=W||(x?"secondary":"primary"),D=W||x?"primary":"secondary";"xs"===p&&(a=["6px","6px","6px","6px"],i=[12,12,12,13],c=[12,12,12,13],s=[1.5,1.5,1.5,1.5],o={transform:"translateY(0.25px)"}),"sm"===p&&(a=["7px","7px","7px","7px"],i=[13,13,13,18],c=[13,13,13,18],s=[1.5,1.5,1.5,2],o={transform:"translateY(0.25px)"}),"md"===p&&(a=["8px","8px","8px","8px"],i=[18,18,18,24],c=[18,18,18,24],s=[2,2,2,3]),"lg"===p&&(a=["10px","10px","12px","16px"],i=[24,24,34,46],c=[24,24,34,46],s=[3,3,4,5]),"xl"===p&&(a=["12px","16px","18px","20px"],i=[34,46,56,68],c=[34,46,56,68],s=[4,5,6,7]),g?(C=g,S=g):d&&u?(C="initial",S="initial"):d?C="initial":u&&(S="middle"),A="middle"===C?{}:o,L="middle"===S?{}:o,d&&(w={"&:hover > #prefix-span > #prefix":z({color:D},d.type.hover)},d=n(d,{id:"prefix",sx:z({position:"relative",height:i,width:c,mr:f?a:[0],strokeWidth:s,verticalAlign:C,transition:"color 0.15s, transform 0.15s"},d.props.sx)})),u&&(k={"&:hover > #suffix-span >#suffix":z({color:D},u.type.hover)},u=n(u,{id:"suffix",sx:z({height:i,width:c,ml:f?a:[0],strokeWidth:s,verticalAlign:S,transition:"color 0.15s, transform 0.15s"},u.props.sx)}));var O=z({},F(p),{lineHeight:1.05,border:"none",background:"transparent",display:"block",color:I,padding:[0],textAlign:"left",cursor:"pointer",width:"fit-content","@media (hover: hover) and (pointer: fine)":z({"&:hover":{color:D}},k,w)},h),R=e.createElement(e.Fragment,null,e.createElement(l,{as:"span",id:"prefix-span",sx:z({display:"inline-block"},A)},d&&d),e.createElement(l,{as:"span",sx:{transition:"color 0.15s"}},f),e.createElement(l,{as:"span",id:"suffix-span",sx:z({display:"inline-block"},L)},u&&u));return y?e.createElement(T,z({ref:r,href:y,internal:b,tracking:E,sx:z({},O,{textDecoration:"none"})},v),R):e.createElement(l,z({ref:r,as:"button",sx:O},v),R)}),D=["label","children","inverted","color","href","internal","tracking","sx"],O=t(function(t,n){var r=t.label,o=t.children,a=t.inverted,i=t.color,c=t.href,s=t.internal,m=t.tracking,p=t.sx,d=M(t,D),u=i||(a?"secondary":"primary"),x=i||a?"primary":"secondary",h=z({border:"none",padding:[0],fontSize:[3,3,3,4],color:u,background:"transparent",textDecoration:"none",fontFamily:"body",lineHeight:"h3",letterSpacing:"body",width:"fit-content",cursor:"pointer",textAlign:"left",mb:[1],"@media (hover: hover) and (pointer: fine)":{"&:hover > #container > #arrow":{transform:"rotate(45deg)",fill:x},"&:hover":{color:x}}},p),f=e.createElement(e.Fragment,null,e.createElement(l,{sx:{transition:"0.15s",letterSpacing:"body",pb:["6px"]}},o),e.createElement(l,{sx:{transition:"0.15s",display:"inline-block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]}},r),e.createElement(l,{as:"span",id:"container",sx:{ml:[2],display:"inline-block"}},e.createElement(v,{id:"arrow",sx:{transition:"fill 0.15s, transform 0.15s",position:"relative",top:["2px"],color:u,height:[15,15,15,17],width:[15,15,15,17]}})));return c?e.createElement(T,z({ref:n,href:c,internal:s,tracking:m,sx:h},d),f):e.createElement(l,z({ref:n,as:"button",sx:h},d),f)}),R=["colormap","label","clim","setClim","setClimStep","discrete","units","width","height","format","horizontal","bottom","sx","sxClim"],H=function(e){return{fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase","@media (hover: hover) and (pointer: fine)":{"&:hover":{borderBottom:e?function(e){return"solid 1px "+e.colors.primary+" !important"}:"unset"}},"&:focus":{outline:"none",borderBottom:e?function(e){return"solid 1px "+e.colors.primary+" !important"}:"unset"},transition:"border 0.15s",userSelect:e?"none !important":"unset",width:"fit-content",minWidth:"fit-content"}},_={width:["10px","16px","16px","17px"],height:["80px","110px","110px","130px"]},j=function(t){var n=t.colormap,r=t.discrete,o=t.horizontal,a=t.width,i=t.height,c=1/n.length*100,s="linear-gradient(to "+(o?"right":"top")+", "+n.map(function(e,t){return"rgb("+e+") "+t*c+"% "+(r&&t<n.length-1?(t+1)*c+"%":"")}).join(",")+")";return e.createElement(l,{sx:z({},o?{width:a||_.height,height:i||_.width}:{width:a||_.width,minHeight:i||_.height},{mt:o?["1px","1px","1px",0]:0,border:function(e){return"solid 1px "+e.colors.hinted},background:s})})},V=function(t){var n=t.label,r=t.units,o=t.horizontal;return e.createElement(l,{sx:!o&&{width:["13px","17px","17px","19px"],alignSelf:"flex-end"}},e.createElement(l,{sx:z({mb:o?0:["-4px","-4px","-4px","-3px"],fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase"},o?{}:{writingMode:"vertical-rl",transform:"rotate(180deg)",whiteSpace:"nowrap",display:"inline-block",overflow:"visible"})},n," ",e.createElement(l,{as:"span",sx:{textTransform:"none",color:"secondary",display:"inline-block"}},r)))},N=function(t){var n=t.colormap,i=t.label,c=t.clim,m=t.setClim,p=t.setClimStep,d=void 0===p?1:p,u=t.discrete,x=t.units,h=t.width,f=t.height,g=t.format,y=void 0===g?function(e){return e}:g,b=t.horizontal,E=void 0!==b&&b,v=t.bottom,w=void 0!==v&&v,k=t.sx,C=t.sxClim,S=M(t,R);if(!Array.isArray(n))throw new Error("expected array for colormap, got '"+n+"'.");var A,L,W,T=[r(),r()],F=o(!1),B=F[0],I=F[1],D=o(!1),O=D[0],N=D[1],P=0,G=null,Y=[0,0],X=d,U=function(e){"min"!==G||B||I(!0),"max"!==G||O||N(!0),W=e.pageX-A,P=e.pageY-L,E?("min"===G&&m(function(e){return[Math.min(Y[0]+W*X,Y[1]),e[1]]}),"max"===G&&m(function(e){return[e[0],Math.max(Y[1]+W*X,Y[0])]})):("min"===G&&m(function(e){return[Math.min(Y[0]-P*X,Y[1]),e[1]]}),"max"===G&&m(function(e){return[e[0],Math.max(Y[1]-P*X,Y[0])]}))},K=function(e){L=e.pageY,A=e.pageX,G=e.target.id,Y=c,document.body.setAttribute("style",E?"cursor: ew-resize !important":"cursor: ns-resize !important"),document.addEventListener("mousemove",U),window.addEventListener("mouseup",function e(){document.body.setAttribute("style","cursor: unset"),document.removeEventListener("mousemove",U),window.removeEventListener("mouseup",e),"min"===G&&I(!1),"max"===G&&N(!1)})};a(function(){var e=function(e){(["ArrowUp","ArrowRight"].includes(e.code)||["ArrowUp","ArrowRight"].includes(e.key))&&function(e){T[0].current===document.activeElement&&(e.preventDefault(),m(function(e){return[Math.min(e[0]+X,e[1]),e[1]]}),T[0].current.focus()),T[1].current===document.activeElement&&(e.preventDefault(),m(function(e){return[e[0],Math.max(e[1]+X,e[0])]}),T[1].current.focus())}(e),(["ArrowDown","ArrowLeft"].includes(e.code)||["ArrowDown","ArrowLeft"].includes(e.key))&&function(e){T[0].current===document.activeElement&&(e.preventDefault(),m(function(e){return[Math.min(e[0]-X,e[1]),e[1]]}),T[0].current.focus()),T[1].current===document.activeElement&&(e.preventDefault(),m(function(e){return[e[0],Math.max(e[1]-X,e[0])]}),T[1].current.focus())}(e)};return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}},[c]);var Z=function(){return e.createElement(l,{id:"min",ref:T[0],tabIndex:0,sx:z({},H(m),{ml:i?E?w?"0px":"10px":["2px","1px","1px","2px"]:0,mr:E?["2px","1px","1px","2px"]:0,mb:E?0:["-2px","-2px","-2px","-3px"],borderBottom:m?B?function(e){return"solid 1px "+e.colors.primary}:function(e){return"solid 1px "+e.colors.secondary}:"unset",cursor:m?E?"ew-resize":"ns-resize":"default"},C),onMouseDown:m?K:function(){},onClick:function(){return T[0].current.focus()}},y(c[0]))},q=function(){return e.createElement(l,{id:"max",ref:T[1],tabIndex:0,sx:z({},H(m),{ml:["2px","1px","1px","2px"],mt:E?0:["-2px","-3px","-3px","-3px"],borderBottom:m?O?function(e){return"solid 1px "+e.colors.primary}:function(e){return"solid 1px "+e.colors.secondary}:"unset",cursor:m?E?"ew-resize":"ns-resize":"default"},C),onMouseDown:m?K:function(){},onClick:function(){return T[1].current.focus()}},y(c[1]))};return e.createElement(s,z({},S,{sx:z({flexDirection:"row",alignItems:"start",justifyContent:"flex-start",gap:["3px","6px","6px","7px"],height:E?"unset":"100%"},k)}),i&&e.createElement(V,{label:i,units:x,horizontal:E}),e.createElement(s,{sx:{flexGrow:E?1:"unset",flexDirection:"column",ml:w&&i?"4px":"0px",height:E?"unset":"100%"}},e.createElement(s,{sx:{gap:["3px","6px","6px","7px"],height:E?"unset":"100%"}},E&&c&&!w&&e.createElement(Z,null),e.createElement(j,{colormap:n,horizontal:E,discrete:u,width:h,height:f}),E&&c&&!w&&e.createElement(q,null)),E&&c&&w&&e.createElement(s,{sx:{justifyContent:"space-between"}},e.createElement(Z,null),e.createElement(q,null))),!E&&e.createElement(s,{sx:{flexDirection:"column-reverse",justifyContent:"space-between",height:f||_.height}},c&&e.createElement(Z,null),c&&e.createElement(q,null)))},P=["start","width","dl","dr","children","sx"],G=function(t){var n=t.start,r=t.width,o=t.dl,a=t.dr,i=t.children,c=t.sx,s=M(t,P);r=r||"auto";var m=function(e){if(e&&!Array.isArray(e)&&(e=[e]),![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length?e=e.map(function(e){return[e,e,e,e]}).flat():Array.isArray(e)&&2==e.length&&(e=e.map(function(e){return[e,e]}).flat()),e};n=m(n=n||"auto"),r=m(r);var p,d,u=n.map(function(e,t){return"auto"==e?"auto":e+r[t]});if(o){if(![.5,1].includes(o))throw new Error("dl must be 0.5 or 1");.5===o&&(p=["-12px",-3,-3,-4]),1===o&&(p=[-4,-5,-5,-6])}if(a){if(![.5,1].includes(a))throw new Error("dr must be 0.5 or 1");.5===a&&(d=["-12px",-3,-3,-4]),1===a&&(d=[-4,-5,-5,-6])}return e.createElement(l,z({},s,{sx:z({gridColumnStart:n,gridColumnEnd:u,ml:p,mr:d},c)}),i)},Y=function(t){var n=t.title,r=t.description,o=t.card;return r=r||"Data and science for climate action.",o=o||"https://images.carbonplan.org/social/homepage.png",e.createElement(C,null,e.createElement("title",null,n=n||"carbonplan"),e.createElement("meta",{name:"description",content:r}),e.createElement("meta",{name:"viewport",content:"initial-scale=1.0, width=device-width"}),e.createElement("link",{rel:"canonical",content:"https://carbonplan.org/"}),e.createElement("link",{rel:"icon",type:"image/svg+xml",href:"https://images.carbonplan.org/favicon.svg"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"manifest",href:"https://images.carbonplan.org/manifest.json"}),e.createElement("meta",{name:"theme-color",content:"#1b1e23"}),e.createElement("link",{rel:"alternate icon",type:"image/png",href:"https://images.carbonplan.org/favicon.png"}),e.createElement("link",{rel:"mask-icon",href:"https://images.carbonplan.org/safari-pinned-tab.svg",color:"#000000"}),e.createElement("link",{rel:"apple-touch-icon",sizes:"180x180",href:"https://images.carbonplan.org/apple-touch-icon.png"}),e.createElement("meta",{name:"msapplication-TileColor",content:"#1b1e23"}),e.createElement("meta",{name:"msapplication-TileImage",content:"https://images.carbonplan.org/mstile-144x144.png"}),e.createElement("meta",{name:"msapplication-config",content:"https://images.carbonplan.org/browserconfig.xml"}),e.createElement("meta",{property:"og:title",content:n}),e.createElement("meta",{property:"og:description",content:r}),e.createElement("meta",{property:"og:image",content:o}),e.createElement("meta",{property:"og:url",content:"https://carbonplan.org"}),e.createElement("meta",{name:"twitter:title",content:n}),e.createElement("meta",{name:"twitter:description",content:r}),e.createElement("meta",{name:"twitter:image",content:o}),e.createElement("meta",{name:"twitter:card",content:"summary_large_image"}))},X=function(t){var n=z({},t);return e.createElement(l,z({as:"svg",width:"150",fill:"currentColor",stroke:"none",viewBox:"0 0 151.1 28.8"},n),e.createElement("g",null,e.createElement("g",null,e.createElement("path",{d:"M9.7,20.1c-1.3-1.4-2-3.1-2-5.2c0-2.1,0.7-3.9,2-5.2c1.3-1.4,3-2,5.1-2c1.7,0,3.1,0.4,4.3,1.3 c1.1,0.9,1.8,2.1,2.1,3.5c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.2,0.2h-2.3c-0.2,0-0.3-0.1-0.4-0.2c-0.3-0.8-0.7-1.4-1.3-1.8 c-0.6-0.4-1.4-0.6-2.2-0.6c-1.3,0-2.3,0.4-3,1.2c-0.8,0.8-1.1,1.9-1.1,3.4c0,1.5,0.4,2.6,1.1,3.4c0.8,0.8,1.8,1.2,3,1.2 c0.8,0,1.6-0.2,2.2-0.6c0.6-0.4,1.1-1,1.3-1.8c0.1-0.2,0.2-0.2,0.4-0.3H21c0.1,0,0.2,0.1,0.2,0.2c0,0.1,0,0.2,0,0.3 c-0.3,1.4-1,2.6-2.1,3.5c-1.1,0.9-2.5,1.3-4.3,1.3C12.7,22.1,11,21.4,9.7,20.1z"})),e.createElement("g",null,e.createElement("path",{d:"M22.5,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1C30.6,7.6,32,8.1,33,9c1,0.9,1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C23,20.1,22.5,19,22.5,17.6z M25.4,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C25.7,16.3,25.4,16.8,25.4,17.5z"})),e.createElement("g",null,e.createElement("path",{d:"M37,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.1c1-1.1,2.3-1.6,3.7-1.6 c0.8,0,1.7,0.1,2.5,0.4c0.2,0.1,0.3,0.3,0.3,0.5v2.2c0,0.2-0.1,0.3-0.2,0.3c0,0-0.1,0-0.2-0.1c-1.1-0.5-2-0.8-2.9-0.8 c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,3v7.3c0,0.2-0.1,0.3-0.3,0.3h-2.2C37.1,21.8,37,21.7,37,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M47.6,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3H50c0.2,0,0.3,0.1,0.3,0.3v6.5c1.3-1.1,2.7-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2c1.1,1.3,1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.8,0-3.2-0.5-4.3-1.6v1 c0,0.2-0.1,0.3-0.3,0.3h-2.2C47.7,21.8,47.6,21.7,47.6,21.6z M51.2,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3 s1.7,1.3,2.9,1.3c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3 C52.9,10.2,51.9,10.7,51.2,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M64.3,20.1c-1.4-1.4-2.1-3.1-2.1-5.2c0-2.1,0.7-3.9,2.1-5.2c1.4-1.4,3.1-2,5.2-2c2.1,0,3.8,0.7,5.2,2 c1.4,1.4,2.1,3.1,2.1,5.2c0,2.1-0.7,3.9-2.1,5.2c-1.4,1.4-3.1,2-5.2,2C67.4,22.1,65.7,21.4,64.3,20.1z M66.4,11.5 c-0.8,0.8-1.2,2-1.2,3.4c0,1.4,0.4,2.5,1.2,3.4s1.9,1.3,3.1,1.3c1.3,0,2.3-0.4,3.1-1.3c0.8-0.8,1.2-2,1.2-3.4 c0-1.4-0.4-2.5-1.2-3.4c-0.8-0.8-1.9-1.3-3.1-1.3C68.2,10.2,67.2,10.7,66.4,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M78.7,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C78.7,21.8,78.7,21.7,78.7,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M101.7,27.1V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1c1.1-1.1,2.5-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2s1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.5,0-3-0.5-4.3-1.6v6.6c0,0.2-0.1,0.3-0.3,0.3 H102C101.8,27.3,101.7,27.2,101.7,27.1z M105.3,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3s1.7,1.3,2.9,1.3 c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3C107,10.2,106,10.7,105.3,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M117.2,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v18.9c0,0.2-0.1,0.3-0.3,0.3h-2.2 C117.3,21.8,117.2,21.7,117.2,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M122,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1c1.7,0,3.1,0.5,4.2,1.4s1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C122.5,20.1,122,19,122,17.6z M124.9,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C125.2,16.3,124.9,16.8,124.9,17.5z"})),e.createElement("g",null,e.createElement("path",{d:"M136.9,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C137,21.8,136.9,21.7,136.9,21.6z"})),e.createElement("path",{d:"M97.6,14.9c0,4.2-0.6,8.3-1.6,12.3c0,0.1-0.1,0.2-0.2,0.2h-2.4c-0.1,0-0.2-0.1-0.2-0.3c1.1-3.9,1.7-8,1.7-12.2 s-0.6-8.3-1.7-12.2c0-0.1,0.1-0.3,0.2-0.3l2.4,0c0.1,0,0.2,0.1,0.2,0.2C97.1,6.5,97.6,10.6,97.6,14.9z"}),e.createElement("path",{d:"M1.4,14.9C1.4,10.6,2,6.5,3,2.6c0-0.1,0.1-0.2,0.2-0.2l2.4,0c0.1,0,0.2,0.1,0.2,0.3c-1.1,3.9-1.7,8-1.7,12.2 s0.6,8.3,1.7,12.2c0,0.1-0.1,0.3-0.2,0.3H3.3c-0.1,0-0.2-0.1-0.2-0.2C2,23.2,1.4,19.1,1.4,14.9z"})))},U=["children","sx","columns","gap"],K=function(t){var n,r,o=t.children,a=t.sx,i=t.columns,l=t.gap,c=M(t,U),s=function(e){if(Array.isArray(e)||(e=[e,e,e,e]),Array.isArray(e)&&![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length&&(e=e.map(function(e){return[e]}).flat()),Array.isArray(e)&&2==e.length&&(e=e.map(function(e){return[e,e]}).flat()),e};return Number.isInteger(l)||Array.isArray(l)?(n=l=s(l),r=l):(n=[4,5,5,6],r=[0,0,0,0]),i=Number.isInteger(i)||Array.isArray(i)?s(i):[6,8,12,12],e.createElement(m,z({},c,{columns:i,sx:z({columnGap:n,rowGap:r},a)}),o)},Z=["value","sx"],q=function(t){var n=t.value,r=t.sx,o=M(t,Z);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},r),"aria-label":"Toggle Menu"},o),!n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"52",y1:"29.9",x2:"16",y2:"29.9"}),e.createElement("line",{x1:"52",y1:"6.1",x2:"16",y2:"6.1"}),e.createElement("line",{x1:"52",y1:"18",x2:"16",y2:"18"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},J=function(e,t,n){return void 0===n&&(n=!1),{width:"auto",color:e===t?"secondary":"text",fontSize:[6,6,7,8],fontFamily:"heading",letterSpacing:"heading",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",borderTopWidth:n?"1px":"0px",py:[3,3,4,5],textDecoration:"none",display:"block",position:"relative",transition:"color 0.15s","@media (hover: hover) and (pointer: fine)":{"&:hover > #arrow":{opacity:1}},"&:hover":{color:e==t?"secondary":"text"}}},Q=[{url:"about",display:"About"},{url:"research",display:"Research"},{url:"blog",display:"Blog"},{url:"press",display:"Press"}],$=function(){return e.createElement(v,{id:"arrow",sx:{pointerEvents:"none",display:"inline-block",position:"absolute",left:["-60px","-68px","-80px","-104px"],top:["32px","32px","46px","62px"],opacity:0,transition:"opacity 0.2s ease-out",transform:"rotate(45deg)",width:[36,36,48,56],height:[36,36,48,56]}})},ee=function(t){var n=t.link,r=t.mode,o=t.nav,a=t.first,i=t.setExpanded,l=n.url,s=n.display,m="remote"===r?"https://carbonplan.org/"+l:"/"+l;return"homepage"===r||"local"===r&&o===l?e.createElement(E,{href:m,passHref:!0},e.createElement(c,{onClick:function(){o===l&&i(!1)},sx:J(o,l,a)},e.createElement($,null),s)):e.createElement(c,{href:m,sx:J(o,l,a)},e.createElement($,null),s)},te=function(t){var n=t.nav,r=t.mode,o=t.setExpanded;return t.links.map(function(t,a){return e.createElement(ee,{key:a,link:t,mode:r,nav:n,first:0===a,setExpanded:o})})},ne=function(t){var n=t.status,r=t.mode,a=t.nav,i=t.menuItems,m=o(!1),p=m[0],u=m[1];return e.createElement(K,{sx:{pt:["12px"],pb:[3]}},e.createElement(G,{start:[1],width:[2]},e.createElement(l,{sx:{display:"block",width:"fit-content"}},("homepage"==r||"local"==r)&&e.createElement(E,{href:"/",passHref:!0},e.createElement(c,{"aria-label":"CarbonPlan Homepage",sx:{display:"block"}},e.createElement(X,{id:"logo",sx:{cursor:"pointer",color:"primary"}}))),(null==r||"remote"==r)&&e.createElement(c,{href:"https://carbonplan.org","aria-label":"CarbonPlan Homepage",sx:{display:"block"}},e.createElement(X,{sx:{cursor:"pointer",color:"primary"}})))),e.createElement(G,{start:[4,9],width:[2,2],dr:1,sx:{display:[n?"flex":"none","flex","flex","flex"],alignItems:"center"}},e.createElement(l,{sx:{fontSize:[1,2,3],position:"relative",top:["-2px","-3px","-3px"]}},n?"("+n+")":"")),e.createElement(G,{start:[n?6:4,6,11,11],width:[n?1:3,3,2,2],sx:{zIndex:5e3}},e.createElement(s,{sx:{justifyContent:"flex-end"}},e.createElement(s,{sx:{mr:"18px",gap:"18px",opacity:p?0:1,transition:"opacity 0.15s",justifyContent:"space-between",alignItems:"center"}},i),e.createElement(q,{sx:{mr:["-2px"]},value:p,onClick:function(e){u(!p)}}))),e.createElement(l,{sx:{opacity:p?1:0,pointerEvents:p?"all":"none",position:"fixed",top:"0px",right:"0px",bottom:"0px",minWidth:"0px",maxHeight:"100vh",width:"100vw",backgroundColor:"background",zIndex:4e3,pt:["79px"],transition:"opacity 0.25s"}},e.createElement(d,null,e.createElement(K,null,e.createElement(G,{start:[2,4,7,7],width:[5,4,5,5]},e.createElement(l,{as:"nav",sx:{display:p?"inherit":"none",mt:[5,5,5,6]}},e.createElement(te,{links:Q,nav:a,mode:r,setExpanded:u})))))))},re=function(t){var n=z({},t);return e.createElement(l,z({as:"svg",width:"80",stroke:"none",fill:"currentColor",viewBox:"0 0 32 32"},n),e.createElement("path",{d:"M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z"}),e.createElement("path",{d:"M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4"}),e.createElement("path",{d:"M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15"}))},oe=function(){return e.createElement(l,{sx:{mt:[7,7,7,8],mb:[7,7,7,8],pb:[2,1,0,0]}},e.createElement(K,{sx:{mb:[0,0,4,5]}},e.createElement(G,{start:[1,2],width:[3,3]},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"EMAIL"),e.createElement(c,{href:"mailto:hello@carbonplan.org",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"hello@carbonplan.org"))),e.createElement(G,{start:[5],width:[1],dl:1,dr:1,sx:{display:["flex","none","none","none"],justifyContent:["center"]}},e.createElement(re,{sx:{mt:["-4px"],width:"60px",height:"60px"}})),e.createElement(G,{start:[1,5,5,5],width:[3,3],sx:{mt:[3,0,0,0]}},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"FOLLOW"),e.createElement(c,{href:"https://twitter.com/carbonplanorg",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"@carbonplanorg"))),e.createElement(G,{start:[1,9],width:[5,4,3,3],sx:{mt:["42px","42px",0,0],mb:[3,3,0,0]}},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"body",color:"secondary"}},"CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))),e.createElement(K,{sx:{mb:["2px"],mt:[5,5,4]}},e.createElement(G,{start:[1,1,2,2],width:[3,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"]}},e.createElement(l,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",pt:[2]}},e.createElement(l,{sx:{color:"secondary",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono"}},"(c) 2021 CARBONPLAN"))),e.createElement(G,{start:[4,3,5,5],width:[2,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"],mt:[0,0,0,0]}},e.createElement(l,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",width:["100%","auto","auto","auto"],pt:[2]}},e.createElement(E,{href:"/terms",passHref:!0},e.createElement(l,{as:"a",sx:{textDecoration:"none",fontSize:[1,1,1,2],color:"secondary",fontFamily:"mono",letterSpacing:"mono",display:"block"}},"READ OUR TERMS")))),e.createElement(G,{start:[5,7,9,9],width:[2,3,3,3],sx:{display:["none","initial","initial","initial"]}},e.createElement(re,{sx:{width:80,height:80,mt:[0,"-10px",4,5],mb:["-12px"]}}))))},ae=["sx"],ie=function(t){var n=t.sx,r=M(t,ae),o=u(),a=o[0],l=o[1],c=i(function(){l("light"===a?"dark":"light")},[a]);return e.createElement(p,z({"aria-label":"Toggle dark mode",onClick:c,role:"checkbox",sx:z({width:32,height:32,display:"inline-block",cursor:"pointer",color:"secondary"},n)},r),e.createElement(w,{sx:{strokeWidth:"1.75",transition:"stroke 0.15s","@media (hover: hover) and (pointer: fine)":{"&:hover":{stroke:"primary"}}}}))},le=function(){var t=process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,n=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER,r=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG,o=x().theme.rawColors.secondary;if(t&&n&&r){var a=t.substring(0,7),i="https://github.com/"+n+"/"+r+"/tree/"+t;return e.createElement(l,{sx:{display:"inline-block",width:"87px"}},e.createElement(ce,{color:o}),e.createElement(c,{href:i,sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:o,fontSize:[1],textTransform:"uppercase",textDecoration:"none"}},a))}return e.createElement(l,{sx:{display:"inline-block",width:"87px"}},e.createElement(ce,{color:o}),e.createElement(h,{sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:o,fontSize:[1],textTransform:"uppercase"}},o))},ce=function(t){return e.createElement("svg",{fill:t.color,opacity:"0.8",viewBox:"0 0 24 24",width:"24",height:"24"},e.createElement("circle",{r:5,cx:19,cy:19}))},se=function(t){var n=t.mode,r=o(function(e){return"mouse"===e?"X,Y: "+pe(0,4)+","+pe(0,4):"scroll"===e?"SCROLL: 0."+pe((0).toFixed(0),2):e}(n)),i=r[0],l=r[1];return a(function(){if("mouse"===n){var e=function(e){var t=pe(e.clientX,4),n=pe(e.clientY,4);l("X,Y: "+t+","+n)};return window.addEventListener("mousemove",e),function(){window.removeEventListener("mousemove",e)}}if("scroll"===n){var t=function(e){var t=function(e,t){return Math.min(e.scrollY/(document.body.offsetHeight-770),.99)}(window);l("SCROLL: 0."+pe((100*t).toFixed(0),2))};return window.addEventListener("scroll",t),function(){window.removeEventListener("scroll",t)}}},[]),e.createElement(h,{sx:{whiteSpace:"nowrap",display:"inline-block",mr:"-6px",fontFamily:"mono",letterSpacing:"body",color:"secondary",fontSize:[1],textTransform:"uppercase"}},i)},me=function(t){return e.createElement(l,{sx:{userSelect:"none",position:"fixed",bottom:"42px",right:"24px",transformOrigin:"right",transform:"rotate(90deg)",display:["none","none","initial"]}},e.createElement(se,{mode:t.mode}),e.createElement(le,null))};function pe(e,t){return e.toString().padStart(t,"0")}var de=["duration","delay","children"],ue=S({from:{opacity:0},to:{opacity:1}}),xe=function(t){var n=t.duration,r=void 0===n?300:n,o=t.delay,a=void 0===o?0:o,i=t.children,c=M(t,de);return e.createElement(l,z({},c,{sx:{animationDuration:r+"ms",animationDelay:a+"ms",animationName:ue.toString(),animationFillMode:"backwards"}}),i)},he=function(e){var t=e.createElement("div");t.style.visibility="hidden",t.style.width="100px",e.body.appendChild(t),t.style.overflow="scroll";var n=e.createElement("div");n.style.width="100%",t.appendChild(n);var r=t.offsetWidth-n.offsetWidth;return t.parentNode.removeChild(t),r},fe=function(){return a(function(){"undefined"!=typeof document&&he(document)>0&&(document.body.classList.add("custom-scrollbar"),document.getElementsByTagName("html")[0].classList.add("custom-scrollbar"))},[]),null},ge=function(t){var n=t.color,r=void 0===n?"muted":n,i=o(!1),c=i[0],s=i[1];return a(function(){function e(e){";"===e.key&&e.metaKey&&s(function(e){return!e})}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[]),e.createElement(l,{sx:{position:"fixed",width:"100%",left:0,top:0,zIndex:"teal"===r?5e3:-1,pointerEvents:"none",display:c?"initial":"none"}},e.createElement(d,null,e.createElement(l,{sx:{display:["none","none","initial","initial"]}},e.createElement(be,{indices:[1,2,3,4,5,6,7,8,9,10,11,12],color:r})),e.createElement(l,{sx:{display:["none","initial","none","none"]}},e.createElement(be,{indices:[1,2,3,4,5,6,7,8],color:r})),e.createElement(l,{sx:{display:["initial","none","none","none"]}},e.createElement(be,{indices:[1,2,3,4,5,6],color:r}))))},ye=["red","orange","yellow","green","teal","blue","purple","pink"];function be(t){var n=t.color,r={outerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"teal"===n?"0px":"1px",borderRightWidth:"teal"===n?"0px":"1px",opacity:"teal"==n?.4:1},innerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"0px",borderRightWidth:"0px",opacity:"teal"==n?.4:1}};return e.createElement(K,null,t.indices.map(function(t){return e.createElement(G,{key:t,start:[t],width:[1,1],dl:.5,dr:.5,sx:z({bg:"teal"===n?"teal":"transparent",height:"100vh"},r.innerGuideColumn)},e.createElement(l,{sx:z({mx:["12px",3,3,4],bg:"teal"===n?"background":"transparent",height:"100%",borderLeftColor:"rainbow"===n?ye[t%8]:"muted",borderRightColor:"rainbow"===n?ye[t%8]:"muted"},r.outerGuideColumn)}))}))}var Ee=["value","sx"],ve=function(t){var n=t.value,r=t.sx,o=M(t,Ee);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},r),"aria-label":"Toggle Menu"},o),!n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"24",y1:"2.1",x2:"24",y2:"6.1"}),e.createElement("line",{x1:"24",y1:"24.1",x2:"24",y2:"33.9"}),e.createElement("line",{x1:"44",y1:"2.1",x2:"44",y2:"12.1"}),e.createElement("line",{x1:"44",y1:"30.1",x2:"44",y2:"33.9"}),e.createElement("circle",{cx:"24",cy:"15.1",r:"5"}),e.createElement("circle",{cx:"44",cy:"21.1",r:"5"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},we=function(t){var n=t.title,r=t.description,o=t.card,i=t.status,c=t.nav,m=t.settings,p=t.footer,u=void 0===p||p,h=t.header,f=void 0===h||h,g=t.metadata,y=void 0===g?"mouse":g,b=t.links,E=void 0===b?"remote":b,v=t.dimmer,w=void 0===v?"bottom":v,k=t.guide,C=void 0===k||k,S=t.scrollbar,M=void 0===S||S,A=t.fade,L=t.container,W=void 0===L||L,T=t.children;(void 0===A||A)&&(T=e.createElement(xe,{duration:250},T)),W&&(T=e.createElement(l,{sx:{mb:[8,8,9,10]}},e.createElement(d,null,T)));var F=x().theme;a(function(){if(F){var e=window.matchMedia("(min-width: "+F.breakpoints[1]+")");return e.onchange=function(e){e.matches&&null!=m&&m.value&&null!=m&&m.onClick&&(null==m||m.onClick())},function(){e.onchange=null}}},[null==F?void 0:F.breakpoints,null==m?void 0:m.value,null==m?void 0:m.onClick]);var B=[e.createElement(ie,{key:"dimmer",sx:{color:"primary",mt:"-2px",display:["block","block","top"===w?"block":"none","top"===w?"block":"none"]}})];return m&&B.push(e.createElement(ve,z({key:"settings",sx:{mr:["2px"],display:["inherit","inherit","none","none"]}},m))),e.createElement(e.Fragment,null,C&&e.createElement(ge,{color:C}),M&&e.createElement(fe,null),e.createElement(Y,{card:o,description:r,title:n}),e.createElement(s,{sx:{flexDirection:"column",minHeight:"100vh"}},f&&e.createElement(l,{as:"header",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",position:"sticky",top:0,bg:"background",height:"56px",zIndex:2e3}},e.createElement(d,null,e.createElement(ne,{mode:E,status:i,nav:c,menuItems:B}))),e.createElement(l,{sx:{width:"100%",flex:"1 1 auto"}},T),u&&e.createElement(l,{as:"footer",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px"}},e.createElement(d,null,e.createElement(oe,null))),"bottom"===w&&e.createElement(l,{sx:{display:["none","none","initial","initial"],position:["fixed"],right:[13],bottom:[17,17,15,15]}},e.createElement(ie,null)),y&&e.createElement(me,{mode:y})))},ke=function(){return e.createElement(we,{footer:!1,title:"404 / carbonplan"},e.createElement(K,{sx:{mb:[5,0,0],pt:[0,0,6]}},e.createElement(G,{start:[1,1,3,3],width:[6,4,4,4]},e.createElement(f.h1,null,"Oops!"),e.createElement(l,{sx:{fontSize:[4,4,4,5],lineHeight:"h3",mt:[3,4,4],mb:[2,3,3],maxWidth:["90%","90%","400px"]}},"Sorry but we can't seem to find the page you are looking for."),e.createElement(l,{sx:{color:"secondary",fontFamily:"mono",letterSpacing:"mono",fontSize:[2,2,2,3],mt:[4,5,5]}},"ERROR CODE 404")),e.createElement(G,{start:[2,5,7,7],width:[4,4,4,4]},e.createElement(l,{sx:{width:["100%"],mt:[2,4,4,5],fill:"primary"}},e.createElement(k,{sx:{width:"100%",height:"auto"}})))))},Ce=function(t){var n=t.value;return e.createElement(p,{onClick:t.onClick,id:t.id,role:"checkbox","aria-checked":n,"aria-label":"Expand",sx:z({display:"inline-block",width:24,height:24,p:[1],cursor:"pointer",fill:"secondary",stroke:"secondary","@media (hover: hover) and (pointer: fine)":{"&:hover":{fill:"primary",stroke:"primary"}}},t.sx)},e.createElement("svg",{viewBox:"0 0 16 16"},e.createElement("path",{d:"M8,0 V16 M0,8 H16",style:{strokeWidth:2,transition:"0.25s all",transformOrigin:"8px 8px",transform:n?"rotate(45deg)":""}})))},Se=["label","value","sx","children"],ze=function(t){var n=t.label,r=t.value,o=t.sx,a=t.children,i=M(t,Se),c=o&&o.color?o.color:"primary",s=i&&(i.onClick||i.onDoubleClick);return e.createElement(l,z({as:s?"button":"span",role:"checkbox","aria-checked":r,"aria-label":n,sx:z({display:"inline-block",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono",cursor:s?"pointer":"inherit",color:c,backgroundColor:"transparent",borderStyle:"solid",borderColor:c,lineHeight:"body",borderWidth:"0px",borderBottomWidth:"1px",textTransform:"uppercase",userSelect:"none",transition:"opacity 0.05s",pt:["1px"],pb:["2px"],px:[0],m:[0],opacity:null==r||r?1:"primary"==c?.24:.33},o)},i),a)},Me=["values","setValues","label","colors","showAll","multiSelect"],Ae={label:{fontFamily:"mono",letterSpacing:"mono",fontSize:[1,1,1,2],color:"secondary",userSelect:"none",textTransform:"uppercase"}},Le=function(e,t,n){return void 0===n&&(n={}),Object.keys(e).reduce(function(e,r){var o;return Object.assign(e,((o={})[r]=n[r]||t,o))},{})},We=function(e){return Object.keys(e).filter(function(t){return e[t]}).length==Object.keys(e).length},Te=function(e){var t,n=e.values,r=e.multiSelect,o=e.setValues,a=e.value,i=We(n),l="all"===a;if(r)if(l&&!i)t=Le(n,!0);else if(l&&i)t=Le(n,!1);else{var c;t=z({},n,((c={})[a]=!n[a],c))}else if(l&&!i)t=Le(n,!0);else if(l&&i);else{var s;t=Le(n,!1,((s={})[a]=!0,s))}t&&o(t)},Fe=function(t){var n=t.values,r=t.setValues,o=t.label,a=t.colors,i=t.showAll,c=void 0!==i&&i,s=t.multiSelect,m=void 0!==s&&s,p=M(t,Me);return e.createElement(l,p,o&&e.createElement(l,{sx:Ae.label},o),e.createElement(l,{sx:{mt:o?[3]:0}},c&&e.createElement(ze,{onClick:function(){return Te({values:n,multiSelect:m,setValues:r,value:"all"})},value:We(n),sx:{mr:[2]}},"All"),Object.keys(n).map(function(t,o){return e.createElement(ze,{onClick:function(){return Te({values:n,multiSelect:m,setValues:r,value:t})},onDoubleClick:function(){return Te({values:n,multiSelect:!1,setValues:r,value:t})},key:o,value:n[t],sx:{width:"max-content",color:a?a[t]:"primary",mr:[2],mb:[1]}},t)})))},Be={xs:[1],sm:[3],md:[5],lg:[7],xl:[9]},Ie=function(t){var n,r=t.children,o=t.direction,a=void 0===o?"vertical":o,i=t.spacing,c=void 0===i?"md":i;if("string"==typeof c?n=Be[c]:"number"==typeof c?n=[c]:Array.isArray(c)&&c.every(function(e){return"number"==typeof e})&&(n=c),!n)throw new Error("Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl");if(!["horizontal","vertical"].includes(a))throw new Error("Invalid direction value. Must be either horizontal or vertical");var s="vertical"===a?"mt":"ml",m="horizontal"===a?{display:"inline-block"}:{};return e.createElement(l,null,e.Children.map(r,function(t,r){var o;return e.createElement(l,{sx:z((o={},o[s]=r>0?n:0,o),m)},t)}))},De=function(t){var n,r=t.children,o=t.variant,a=void 0===o?"h1":o;return"h1"===a&&(n=[4,"27px","42px","54px"]),"h2"===a&&(n=[4,4,"14px","54px"]),e.createElement(e.Fragment,null,e.createElement(G,{start:[1,4,8,8],width:[1,1,1,1]},e.createElement(l,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],textAlign:"right"}},"/")),e.createElement(G,{start:[2,5,9,9],width:[3,3,2,2]},e.createElement(l,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],height:["100%","0px","0px","0px"]}},r)))},Oe=function(t){var n=t.children,r=t.sidenote,o=t.description,a=t.descriptionStart,i=void 0===a?[1,3,5,5]:a,c=t.descriptionWidth,s=void 0===c?[5,5,5,4]:c;return e.createElement(K,{sx:{mt:[5,6,7,8],mb:[5,6,7,8]}},e.createElement(G,{start:[1,1,2,2],width:[6,2,3,3]},e.createElement(l,{as:"h1",variant:"styles.h1",sx:z({my:[0,0,0,0]},t.sx)},n)),r&&e.createElement(De,null,r),o&&e.createElement(G,{start:i,width:s},e.createElement(l,{sx:{mt:[4,"5px","20px","31px"],fontSize:[2,2,2,3]}},o)))},Re=["size","inverted","sx"],He=t(function(t,n){var r,o=t.size,a=void 0===o?"sm":o,i=t.inverted,l=t.sx,c=M(t,Re),s=z(((r={color:i?"secondary":"primary",borderColor:"secondary",borderStyle:"solid",borderWidth:"0px",borderBottomWidth:"1px",borderRadius:"0px",transition:"border 0.15s"}).borderBottomWidth="1px",r.width="calc(min(15ch, 100%))",r.p=[0],r.py=["2px"],r["input::-webkit-outer-spin-button"]={WebkitAppearance:"none",margin:0},r["input::-webkit-inner-spin-button"]={WebkitAppearance:"none",margin:0},r[":focus"]={borderColor:"primary"},r[":focus-visible"]={outline:"none !important",background:"none !important"},r),F(a),l);return e.createElement(g,z({},c,{ref:n,sx:s}))}),_e=["children","size","sx","sxSelect"],je=function(t){var n,o,a,i,c,s,m,p=t.children,d=t.size,u=void 0===d?"sm":d,x=t.sx,h=t.sxSelect,f=M(t,_e),g=x&&x.color?x.color:"primary",y=F(u),b=r(null),E=f.onChange,w=(o=function(e){return"onChange"!==e},function(e){var t={};for(var n in e)o(n||"")&&(t[n]=e[n]);return t})(f);if(!["xs","sm","md"].includes(u))throw new Error("Size must be xs, sm, or md");return"xs"===u&&(i=[14,14,14,16],c=[14,14,14,14],m=["1px"],s=["-14px","-14px","-14px","-16px"]),"sm"===u&&(i=[15,15,15,20],c=[15,15,15,20],m=["1px"],s=["-16px","-16px","-16px","-20px"]),"md"===u&&(i=[20,20,20,20],c=[20,20,20,20],m=["2px"],s=["-20px","-20px","-20px","-20px"]),a=c.map(function(e){return e+12}),e.createElement(l,{sx:z({display:"inline-block"},x)},e.createElement(l,z({as:"select",ref:b,onChange:function(e){b.current.blur(),E&&E(e)},sx:z({},y,(n={lineHeight:"normal",cursor:"pointer",WebkitAppearance:"none",MozAppearance:"none",pb:["5px"],bg:"transparent",pr:a,border:"none",borderBottomStyle:"solid",borderBottomWidth:"1px",borderBottomColor:"primary",borderRadius:"0px",color:"text",width:"fit-content"},n.color=g,n.userSelect="none",n["@media (hover: none) and (pointer: coarse)"]={"&:focus-visible":{outline:"none !important",background:"transparent !important"}},n),h)},w),p),e.createElement(v,{sx:{width:c,height:i,position:"relative",ml:s,top:m,fill:"secondary",transform:"rotate(135deg)",pointerEvents:"none"}}))},Ve=["sx"],Ne=t(function(t,n){var r=t.sx,o=M(t,Ve),a=r&&r.color?r.color:"primary",i=x().theme.rawColors;return e.createElement(y,z({ref:n,sx:z({"&::-webkit-slider-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:"0 0 0 0px "+i.secondary,transition:"box-shadow .15s ease"},"&::-moz-range-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:"0 0 0 0px "+i.secondary,transition:"box-shadow .15s ease"},":focus-visible":{outline:"none !important",background:i.secondary+" !important"},":focus":{color:a,"&::-webkit-slider-thumb":{boxShadow:"0 0 0 4px "+i.secondary},"&::-moz-range-thumb":{boxShadow:"0 0 0 4px "+i.secondary}},color:a},r)},o))}),Pe={reset:{verticalAlign:"baseline",border:0,outline:0,margin:0,padding:0},row:{borderStyle:"solid",borderWidth:"0px",borderTopWidth:"1px",borderColor:"muted",pt:[3,3,3,"20px"],pb:[3,3,3,"20px"],mb:["2px"]},header:{display:"block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]},index:{display:"block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]},entry:{display:"block",fontSize:[2,2,2,3],fontFamily:"faux",letterSpacing:"faux",mb:["1px"],mt:[2,0,0,0]}},Ge=function(t){var n=t.data,r=t.sx,o=t.color,a=t.header,i=t.columns,c=t.start,s=t.width,m=t.index,p=void 0===m||m,d=t.borderBottom,u=void 0===d||d,x=t.borderTop,h=void 0===x||x;if(!c||!i||!s)throw new Error("Must provide columns, start, and width");return e.createElement(l,{as:"table",sx:z({display:"block"},r)},e.createElement(l,{as:"tbody",sx:{display:"block"}},a&&e.createElement(K,{as:"tr",sx:z({},Pe.reset,Pe.header,Pe.row,{color:o,borderTopWidth:h?"1px":"0px"})},e.createElement(G,{as:"td",start:[1],width:i,sx:Pe.index},a)),n.map(function(t,r){return e.createElement(K,{as:"tr",columns:i,key:r,sx:z({},Pe.reset,Pe.row,{pb:u&&r===n.length-1?["18px","18px","18px","22px"]:[3,3,3,"20px"],borderBottomWidth:u&&r===n.length-1?"1px":"0px",borderTopWidth:h||0!==r||a?"1px":"0px"})},t.map(function(t,n){return e.createElement(G,{as:"td",key:n,start:c[n],width:s[n],sx:z({},Pe.reset,0==n&&p?Pe.index:Pe.entry)},t)}))})))},Ye=["value","onClick","disabled","sx"],Xe=t(function(t,n){var r=t.value,o=t.onClick,a=t.disabled,i=t.sx,c=M(t,Ye),s=i&&i.color?i.color:"primary";return e.createElement(l,z({ref:n,as:"button",onClick:o,role:"checkbox","aria-checked":r=!a&&r,"aria-label":"Toggle",sx:z({border:"none",background:"none",cursor:a?"default":"pointer",p:[0],m:[0],display:"inline-block"},i)},c),e.createElement(l,{sx:{width:"50px",height:"20px",borderRadius:"20px",backgroundColor:r?b(s,"primary"==s?.5:.45):"muted",position:"relative",transition:"0.15s",display:"inline-block"}},e.createElement(l,{sx:{width:"14px",height:"14px",borderRadius:"7px",position:"absolute",left:r?"32px":"4px",top:"3px",backgroundColor:r?s:"secondary",transition:"0.15s"}})))}),Ue=function(t){var n=t.id;return n?e.createElement(e.Fragment,null,e.createElement("script",{async:!0,src:"https://www.googletagmanager.com/gtag/js?id="+n}),e.createElement("script",{dangerouslySetInnerHTML:{__html:"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', '"+n+"', {\n page_path: window.location.pathname,\n });\n "}})):null},Ke=function(t){var n=t.expanded,r=t.sx,o=t.children;return e.createElement(e.Fragment,null,e.createElement(l,{sx:{position:"fixed",top:"56px",bottom:"0px",left:"0px",width:"calc(100vw)",mt:["56px"],bg:"background",zIndex:1e3,transition:"opacity 0.15s",opacity:n?.9:0,pointerEvents:n?"all":"none"}}),e.createElement(l,{sx:z({position:"fixed",width:"calc(100vw)",top:"0px",mt:["56px"],pb:[6,7,7,8],pt:[5,6,7,8],bg:"background",zIndex:1100,borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",transition:"transform 0.15s",ml:[-3,-4,-5,-6],pl:[3,4,5,6],pr:[3,4,5,6],transform:n?"translateY(0)":"translateY(-100%)"},r)},e.createElement(K,null,e.createElement(G,{start:[1,1,1,1],width:[6,8,10,10]},o))))},Ze={month:"short",day:"numeric",year:"numeric"},qe=function(e,t,n){var r;if(!n)return null;var o="string"==typeof n?n:Ze[t],a=e.toLocaleString("default",((r={})[t]=o,r));return"numeric"===o&&"day"===t?a.padStart(2,"0"):a},Je=function(e,t){void 0===t&&(t=Ze);var n=new Date(e.replace(/-/g,"/"));return[qe(n,"month",t.month),qe(n,"day",t.day),qe(n,"year",t.year)].filter(Boolean).join(" ")};export{L as Badge,I as Button,O as Callout,N as Colorbar,G as Column,ke as Custom404,ie as Dimmer,Ce as Expander,xe as FadeIn,Fe as Filter,oe as Footer,Ie as Group,ge as Guide,ne as Header,Oe as Heading,He as Input,we as Layout,T as Link,X as Logo,q as Menu,Y as Meta,re as Monogram,K as Row,fe as Scrollbar,je as Select,ve as Settings,De as Sidenote,Ne as Slider,Ge as Table,ze as Tag,Xe as Toggle,Ue as Tracking,Ke as Tray,Je as formatDate,he as getScrollbarWidth};
2920
2
  //# sourceMappingURL=index.esm.js.map