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