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