@carbonplan/components 11.1.4 → 11.2.0-develop.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dst/index.esm.js +1 -2925
  2. package/dst/index.esm.js.map +1 -1
  3. package/dst/index.js +1 -2963
  4. package/dst/index.js.map +1 -1
  5. package/dst/index.modern.js +1 -2874
  6. package/dst/index.modern.js.map +1 -1
  7. package/package.json +5 -3
package/dst/index.esm.js CHANGED
@@ -1,2926 +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(Box, {
1367
- sx: {
1368
- display: [status ? 'none' : 'flex', 'flex', 'flex', 'flex'],
1369
- mr: '18px',
1370
- gap: '18px',
1371
- opacity: expanded ? 0 : 1,
1372
- transition: 'opacity 0.15s',
1373
- justifyContent: 'space-between',
1374
- alignItems: 'center'
1375
- }
1376
- }, menuItems), /*#__PURE__*/React.createElement(Menu, {
1377
- sx: {
1378
- flexShrink: 0,
1379
- mr: ['-2px']
1380
- },
1381
- value: expanded,
1382
- onClick: toggle
1383
- }))), /*#__PURE__*/React.createElement(Box, {
1384
- sx: {
1385
- opacity: expanded ? 1 : 0,
1386
- pointerEvents: expanded ? 'all' : 'none',
1387
- position: 'fixed',
1388
- top: '0px',
1389
- right: '0px',
1390
- bottom: '0px',
1391
- minWidth: '0px',
1392
- maxHeight: '100vh',
1393
- width: '100vw',
1394
- backgroundColor: 'background',
1395
- zIndex: 4000,
1396
- pt: ['79px'],
1397
- transition: 'opacity 0.25s'
1398
- }
1399
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
1400
- start: [2, 4, 7, 7],
1401
- width: [5, 4, 5, 5]
1402
- }, /*#__PURE__*/React.createElement(Box, {
1403
- as: "nav",
1404
- sx: {
1405
- display: expanded ? 'inherit' : 'none',
1406
- mt: [5, 5, 5, 6]
1407
- }
1408
- }, /*#__PURE__*/React.createElement(NavGroup, {
1409
- links: links,
1410
- nav: nav,
1411
- mode: mode,
1412
- setExpanded: setExpanded
1413
- })))))));
1414
- };
1415
-
1416
- var Monogram = function Monogram(_ref) {
1417
- var props = _extends({}, _ref);
1418
-
1419
- return /*#__PURE__*/React.createElement(Box, _extends({
1420
- as: "svg",
1421
- width: "80",
1422
- stroke: "none",
1423
- fill: "currentColor",
1424
- viewBox: "0 0 32 32"
1425
- }, props), /*#__PURE__*/React.createElement("path", {
1426
- 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"
1427
- }), /*#__PURE__*/React.createElement("path", {
1428
- 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"
1429
- }), /*#__PURE__*/React.createElement("path", {
1430
- 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"
1431
- }));
1432
- };
1433
-
1434
- var Footer = function Footer() {
1435
- return /*#__PURE__*/React.createElement(Box, {
1436
- sx: {
1437
- mt: [7, 7, 7, 8],
1438
- mb: [7, 7, 7, 8],
1439
- pb: [2, 1, 0, 0]
1440
- }
1441
- }, /*#__PURE__*/React.createElement(Row, {
1442
- sx: {
1443
- mb: [0, 0, 4, 5]
1444
- }
1445
- }, /*#__PURE__*/React.createElement(Column, {
1446
- start: [1, 2],
1447
- width: [3, 3]
1448
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1449
- sx: {
1450
- fontSize: [2, 2, 2, 3],
1451
- fontFamily: 'heading',
1452
- letterSpacing: 'mono',
1453
- mb: [2]
1454
- }
1455
- }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
1456
- href: "mailto:hello@carbonplan.org",
1457
- sx: {
1458
- textDecoration: 'none',
1459
- fontSize: [2, 2, 2, 3]
1460
- }
1461
- }, "hello@carbonplan.org"))), /*#__PURE__*/React.createElement(Column, {
1462
- start: [5],
1463
- width: [1],
1464
- dl: 1,
1465
- dr: 1,
1466
- sx: {
1467
- display: ['flex', 'none', 'none', 'none'],
1468
- justifyContent: ['center']
1469
- }
1470
- }, /*#__PURE__*/React.createElement(Monogram, {
1471
- sx: {
1472
- mt: ['-4px'],
1473
- width: '60px',
1474
- height: '60px'
1475
- }
1476
- })), /*#__PURE__*/React.createElement(Column, {
1477
- start: [1, 5, 5, 5],
1478
- width: [3, 3],
1479
- sx: {
1480
- mt: [3, 0, 0, 0]
1481
- }
1482
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1483
- sx: {
1484
- fontSize: [2, 2, 2, 3],
1485
- fontFamily: 'heading',
1486
- letterSpacing: 'mono',
1487
- mb: [2]
1488
- }
1489
- }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
1490
- href: "https://twitter.com/carbonplanorg",
1491
- sx: {
1492
- textDecoration: 'none',
1493
- fontSize: [2, 2, 2, 3]
1494
- }
1495
- }, "@carbonplanorg"))), /*#__PURE__*/React.createElement(Column, {
1496
- start: [1, 9],
1497
- width: [5, 4, 3, 3],
1498
- sx: {
1499
- mt: ['42px', '42px', 0, 0],
1500
- mb: [3, 3, 0, 0]
1501
- }
1502
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
1503
- sx: {
1504
- fontSize: [2, 2, 2, 3],
1505
- fontFamily: 'body',
1506
- color: 'secondary'
1507
- }
1508
- }, "CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))), /*#__PURE__*/React.createElement(Row, {
1509
- sx: {
1510
- mb: ['2px'],
1511
- mt: [5, 5, 4]
1512
- }
1513
- }, /*#__PURE__*/React.createElement(Column, {
1514
- start: [1, 1, 2, 2],
1515
- width: [3, 2, 3, 3],
1516
- sx: {
1517
- display: 'flex',
1518
- alignItems: ['flex-start', 'flex-start', 'flex-end']
1519
- }
1520
- }, /*#__PURE__*/React.createElement(Box, {
1521
- sx: {
1522
- bottom: '0px',
1523
- borderStyle: 'solid',
1524
- borderColor: 'muted',
1525
- borderWidth: '0px',
1526
- borderTopWidth: '1px',
1527
- pt: [2]
1528
- }
1529
- }, /*#__PURE__*/React.createElement(Box, {
1530
- sx: {
1531
- color: 'secondary',
1532
- fontSize: [1, 1, 1, 2],
1533
- fontFamily: 'mono',
1534
- letterSpacing: 'mono'
1535
- }
1536
- }, "(c) 2021 CARBONPLAN"))), /*#__PURE__*/React.createElement(Column, {
1537
- start: [4, 3, 5, 5],
1538
- width: [2, 2, 3, 3],
1539
- sx: {
1540
- display: 'flex',
1541
- alignItems: ['flex-start', 'flex-start', 'flex-end'],
1542
- mt: [0, 0, 0, 0]
1543
- }
1544
- }, /*#__PURE__*/React.createElement(Box, {
1545
- sx: {
1546
- bottom: '0px',
1547
- borderStyle: 'solid',
1548
- borderColor: 'muted',
1549
- borderWidth: '0px',
1550
- borderTopWidth: '1px',
1551
- width: ['100%', 'auto', 'auto', 'auto'],
1552
- pt: [2]
1553
- }
1554
- }, /*#__PURE__*/React.createElement(NextLink, {
1555
- href: "/terms",
1556
- passHref: true
1557
- }, /*#__PURE__*/React.createElement(Box, {
1558
- as: "a",
1559
- sx: {
1560
- textDecoration: 'none',
1561
- fontSize: [1, 1, 1, 2],
1562
- color: 'secondary',
1563
- fontFamily: 'mono',
1564
- letterSpacing: 'mono',
1565
- display: 'block'
1566
- }
1567
- }, "READ OUR TERMS")))), /*#__PURE__*/React.createElement(Column, {
1568
- start: [5, 7, 9, 9],
1569
- width: [2, 3, 3, 3],
1570
- sx: {
1571
- display: ['none', 'initial', 'initial', 'initial']
1572
- }
1573
- }, /*#__PURE__*/React.createElement(Monogram, {
1574
- sx: {
1575
- width: 80,
1576
- height: 80,
1577
- mt: [0, '-10px', 4, 5],
1578
- mb: ['-12px']
1579
- }
1580
- }))));
1581
- };
1582
-
1583
- var _excluded$8 = ["sx"];
1584
-
1585
- var Dimmer = function Dimmer(_ref) {
1586
- var sx = _ref.sx,
1587
- props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
1588
-
1589
- var _useColorMode = useColorMode(),
1590
- colorMode = _useColorMode[0],
1591
- setColorMode = _useColorMode[1];
1592
-
1593
- var toggle = useCallback(function () {
1594
- setColorMode(colorMode === 'light' ? 'dark' : 'light');
1595
- }, [colorMode]);
1596
- return /*#__PURE__*/React.createElement(IconButton, _extends({
1597
- "aria-label": "Toggle dark mode",
1598
- onClick: toggle,
1599
- role: "checkbox",
1600
- sx: _extends({
1601
- width: 32,
1602
- height: 32,
1603
- display: 'inline-block',
1604
- cursor: 'pointer',
1605
- color: 'secondary'
1606
- }, sx)
1607
- }, props), /*#__PURE__*/React.createElement(Sun, {
1608
- sx: {
1609
- strokeWidth: '1.75',
1610
- transition: 'stroke 0.15s',
1611
- '@media (hover: hover) and (pointer: fine)': {
1612
- '&:hover': {
1613
- stroke: 'primary'
1614
- }
1615
- }
1616
- }
1617
- }));
1618
- };
1619
-
1620
- var GitSha = function GitSha() {
1621
- var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
1622
- var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
1623
- var slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
1624
-
1625
- var _useThemeUI = useThemeUI(),
1626
- theme = _useThemeUI.theme;
1627
-
1628
- var color = theme.rawColors.secondary;
1629
-
1630
- if (sha && owner && slug) {
1631
- var shortSha = sha.substring(0, 7);
1632
- var href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
1633
- return /*#__PURE__*/React.createElement(Box, {
1634
- sx: {
1635
- display: 'inline-block',
1636
- width: '87px'
1637
- }
1638
- }, /*#__PURE__*/React.createElement(Separator, {
1639
- color: color
1640
- }), /*#__PURE__*/React.createElement(Link$2, {
1641
- href: href,
1642
- sx: {
1643
- whiteSpace: 'nowrap',
1644
- display: 'inline-block',
1645
- ml: [2],
1646
- fontFamily: 'mono',
1647
- letterSpacing: 'body',
1648
- color: color,
1649
- fontSize: [1],
1650
- textTransform: 'uppercase',
1651
- textDecoration: 'none'
1652
- }
1653
- }, shortSha));
1654
- } else {
1655
- // fallback
1656
- return /*#__PURE__*/React.createElement(Box, {
1657
- sx: {
1658
- display: 'inline-block',
1659
- width: '87px'
1660
- }
1661
- }, /*#__PURE__*/React.createElement(Separator, {
1662
- color: color
1663
- }), /*#__PURE__*/React.createElement(Text, {
1664
- sx: {
1665
- whiteSpace: 'nowrap',
1666
- display: 'inline-block',
1667
- ml: [2],
1668
- fontFamily: 'mono',
1669
- letterSpacing: 'body',
1670
- color: color,
1671
- fontSize: [1],
1672
- textTransform: 'uppercase'
1673
- }
1674
- }, color));
1675
- }
1676
- };
1677
-
1678
- var Separator = function Separator(_ref) {
1679
- var color = _ref.color;
1680
- return /*#__PURE__*/React.createElement("svg", {
1681
- fill: color,
1682
- opacity: "0.8",
1683
- viewBox: "0 0 24 24",
1684
- width: "24",
1685
- height: "24"
1686
- }, /*#__PURE__*/React.createElement("circle", {
1687
- r: 5,
1688
- cx: 19,
1689
- cy: 19
1690
- }));
1691
- };
1692
-
1693
- var Value = function Value(_ref) {
1694
- var mode = _ref.mode;
1695
-
1696
- var _useState = useState(init(mode)),
1697
- display = _useState[0],
1698
- setDisplay = _useState[1];
1699
-
1700
- useEffect(function () {
1701
- if (mode === 'mouse') {
1702
- var setFromEvent = function setFromEvent(e) {
1703
- var x = format(e.clientX, 4);
1704
- var y = format(e.clientY, 4);
1705
- setDisplay("X,Y: " + x + "," + y);
1706
- };
1707
-
1708
- window.addEventListener('mousemove', setFromEvent);
1709
- return function () {
1710
- window.removeEventListener('mousemove', setFromEvent);
1711
- };
1712
- }
1713
-
1714
- if (mode === 'scroll') {
1715
- var _setFromEvent = function _setFromEvent(e) {
1716
- var y = scrollFraction(window);
1717
- setDisplay("SCROLL: 0." + format((y * 100).toFixed(0), 2));
1718
- };
1719
-
1720
- window.addEventListener('scroll', _setFromEvent);
1721
- return function () {
1722
- window.removeEventListener('scroll', _setFromEvent);
1723
- };
1724
- }
1725
- }, []);
1726
- return /*#__PURE__*/React.createElement(Text, {
1727
- sx: {
1728
- whiteSpace: 'nowrap',
1729
- display: 'inline-block',
1730
- mr: '-6px',
1731
- fontFamily: 'mono',
1732
- letterSpacing: 'body',
1733
- color: 'secondary',
1734
- fontSize: [1],
1735
- textTransform: 'uppercase'
1736
- }
1737
- }, display);
1738
- };
1739
-
1740
- var Metadata = function Metadata(_ref2) {
1741
- var mode = _ref2.mode;
1742
- return /*#__PURE__*/React.createElement(Box, {
1743
- sx: {
1744
- userSelect: 'none',
1745
- position: 'fixed',
1746
- bottom: '42px',
1747
- right: '24px',
1748
- transformOrigin: 'right',
1749
- transform: 'rotate(90deg)',
1750
- display: ['none', 'none', 'initial']
1751
- }
1752
- }, /*#__PURE__*/React.createElement(Value, {
1753
- mode: mode
1754
- }), /*#__PURE__*/React.createElement(GitSha, null));
1755
- };
1756
-
1757
- function init(mode) {
1758
- if (mode === 'mouse') {
1759
- return "X,Y: " + format(0, 4) + "," + format(0, 4);
1760
- } else if (mode === 'scroll') {
1761
- return "SCROLL: 0." + format(0 .toFixed(0), 2);
1762
- } else {
1763
- return mode;
1764
- }
1765
- }
1766
-
1767
- function format(num, pad) {
1768
- return num.toString().padStart(pad, '0');
1769
- }
1770
-
1771
- function scrollFraction(window, documnt) {
1772
- return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
1773
- }
1774
-
1775
- var _excluded$7 = ["duration", "delay", "children"];
1776
- var fade = keyframes({
1777
- from: {
1778
- opacity: 0
1779
- },
1780
- to: {
1781
- opacity: 1
1782
- }
1783
- });
1784
-
1785
- var FadeIn = function FadeIn(_ref) {
1786
- var _ref$duration = _ref.duration,
1787
- duration = _ref$duration === void 0 ? 300 : _ref$duration,
1788
- _ref$delay = _ref.delay,
1789
- delay = _ref$delay === void 0 ? 0 : _ref$delay,
1790
- children = _ref.children,
1791
- delegated = _objectWithoutPropertiesLoose(_ref, _excluded$7);
1792
-
1793
- return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
1794
- sx: {
1795
- animationDuration: duration + 'ms',
1796
- animationDelay: delay + 'ms',
1797
- animationName: fade.toString(),
1798
- animationFillMode: 'backwards'
1799
- }
1800
- }), children);
1801
- };
1802
-
1803
- var getScrollbarWidth = function getScrollbarWidth(document) {
1804
- var outer = document.createElement('div');
1805
- outer.style.visibility = 'hidden';
1806
- outer.style.width = '100px';
1807
- document.body.appendChild(outer);
1808
- outer.style.overflow = 'scroll';
1809
- var inner = document.createElement('div');
1810
- inner.style.width = '100%';
1811
- outer.appendChild(inner);
1812
- var delta = outer.offsetWidth - inner.offsetWidth;
1813
- outer.parentNode.removeChild(outer);
1814
- return delta;
1815
- };
1816
-
1817
- var Scrollbar = function Scrollbar() {
1818
- useEffect(function () {
1819
- if (typeof document !== 'undefined') {
1820
- var delta = getScrollbarWidth(document);
1821
-
1822
- if (delta > 0) {
1823
- document.body.classList.add('custom-scrollbar');
1824
- document.getElementsByTagName('html')[0].classList.add('custom-scrollbar');
1825
- }
1826
- }
1827
- }, []);
1828
- return null;
1829
- };
1830
-
1831
- var Guide = function Guide(_ref) {
1832
- var _ref$color = _ref.color,
1833
- color = _ref$color === void 0 ? 'muted' : _ref$color;
1834
-
1835
- var _useState = useState(false),
1836
- display = _useState[0],
1837
- setDisplay = _useState[1];
1838
-
1839
- useEffect(function () {
1840
- function handler(event) {
1841
- var key = event.key,
1842
- metaKey = event.metaKey;
1843
-
1844
- if (key === ';' && metaKey) {
1845
- setDisplay(function (prev) {
1846
- return !prev;
1847
- });
1848
- }
1849
- }
1850
-
1851
- document.addEventListener('keydown', handler);
1852
- return function () {
1853
- document.removeEventListener('keydown', handler);
1854
- };
1855
- }, []);
1856
- return /*#__PURE__*/React.createElement(Box, {
1857
- sx: {
1858
- position: 'fixed',
1859
- width: '100%',
1860
- left: 0,
1861
- top: 0,
1862
- zIndex: color === 'teal' ? 5000 : -1,
1863
- pointerEvents: 'none',
1864
- display: display ? 'initial' : 'none'
1865
- }
1866
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
1867
- sx: {
1868
- display: ['none', 'none', 'initial', 'initial']
1869
- }
1870
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1871
- indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
1872
- color: color
1873
- })), /*#__PURE__*/React.createElement(Box, {
1874
- sx: {
1875
- display: ['none', 'initial', 'none', 'none']
1876
- }
1877
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1878
- indices: [1, 2, 3, 4, 5, 6, 7, 8],
1879
- color: color
1880
- })), /*#__PURE__*/React.createElement(Box, {
1881
- sx: {
1882
- display: ['initial', 'none', 'none', 'none']
1883
- }
1884
- }, /*#__PURE__*/React.createElement(GuideColumns, {
1885
- indices: [1, 2, 3, 4, 5, 6],
1886
- color: color
1887
- }))));
1888
- };
1889
-
1890
- var colorCycle = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'pink'];
1891
-
1892
- function GuideColumns(_ref2) {
1893
- var indices = _ref2.indices,
1894
- color = _ref2.color;
1895
- var sx = {
1896
- outerGuideColumn: {
1897
- borderStyle: 'solid',
1898
- borderWidth: '0px',
1899
- borderLeftWidth: color === 'teal' ? '0px' : '1px',
1900
- borderRightWidth: color === 'teal' ? '0px' : '1px',
1901
- opacity: color == 'teal' ? 0.4 : 1
1902
- },
1903
- innerGuideColumn: {
1904
- borderStyle: 'solid',
1905
- borderWidth: '0px',
1906
- borderLeftWidth: '0px',
1907
- borderRightWidth: '0px',
1908
- opacity: color == 'teal' ? 0.4 : 1
1909
- }
1910
- };
1911
- return /*#__PURE__*/React.createElement(Row, null, indices.map(function (i) {
1912
- return /*#__PURE__*/React.createElement(Column, {
1913
- key: i,
1914
- start: [i],
1915
- width: [1, 1],
1916
- dl: 0.5,
1917
- dr: 0.5,
1918
- sx: _extends({
1919
- bg: color === 'teal' ? 'teal' : 'transparent',
1920
- height: '100vh'
1921
- }, sx.innerGuideColumn)
1922
- }, /*#__PURE__*/React.createElement(Box, {
1923
- sx: _extends({
1924
- mx: ['12px', 3, 3, 4],
1925
- bg: color === 'teal' ? 'background' : 'transparent',
1926
- height: '100%',
1927
- borderLeftColor: color === 'rainbow' ? colorCycle[i % 8] : 'muted',
1928
- borderRightColor: color === 'rainbow' ? colorCycle[i % 8] : 'muted'
1929
- }, sx.outerGuideColumn)
1930
- }));
1931
- }));
1932
- }
1933
-
1934
- var _excluded$6 = ["value", "sx"];
1935
-
1936
- var Settings = function Settings(_ref) {
1937
- var value = _ref.value,
1938
- sx = _ref.sx,
1939
- props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
1940
-
1941
- return /*#__PURE__*/React.createElement(IconButton, _extends({
1942
- sx: _extends({
1943
- cursor: 'pointer',
1944
- fill: 'none',
1945
- strokeWidth: '2px',
1946
- stroke: 'text',
1947
- '.paren': {
1948
- opacity: '0'
1949
- },
1950
- '@media (hover: hover) and (pointer: fine)': {
1951
- '&:hover .paren': {
1952
- opacity: '1'
1953
- }
1954
- }
1955
- }, sx),
1956
- "aria-label": "Toggle Menu"
1957
- }, props), !value && /*#__PURE__*/React.createElement("svg", {
1958
- style: {
1959
- width: '50px',
1960
- height: '30px',
1961
- transform: 'scale(2)',
1962
- marginTop: '-3px'
1963
- },
1964
- xmlns: "http://www.w3.org/2000/svg",
1965
- viewBox: "0 0 68 36"
1966
- }, /*#__PURE__*/React.createElement("line", {
1967
- x1: "24",
1968
- y1: "2.1",
1969
- x2: "24",
1970
- y2: "6.1"
1971
- }), /*#__PURE__*/React.createElement("line", {
1972
- x1: "24",
1973
- y1: "24.1",
1974
- x2: "24",
1975
- y2: "33.9"
1976
- }), /*#__PURE__*/React.createElement("line", {
1977
- x1: "44",
1978
- y1: "2.1",
1979
- x2: "44",
1980
- y2: "12.1"
1981
- }), /*#__PURE__*/React.createElement("line", {
1982
- x1: "44",
1983
- y1: "30.1",
1984
- x2: "44",
1985
- y2: "33.9"
1986
- }), /*#__PURE__*/React.createElement("circle", {
1987
- cx: "24",
1988
- cy: "15.1",
1989
- r: "5"
1990
- }), /*#__PURE__*/React.createElement("circle", {
1991
- cx: "44",
1992
- cy: "21.1",
1993
- r: "5"
1994
- }), /*#__PURE__*/React.createElement("path", {
1995
- style: {
1996
- transition: 'all 0.2s'
1997
- },
1998
- className: "paren",
1999
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
2000
- }), /*#__PURE__*/React.createElement("path", {
2001
- style: {
2002
- transition: 'all 0.2s'
2003
- },
2004
- className: "paren",
2005
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
2006
- })), value && /*#__PURE__*/React.createElement("svg", {
2007
- style: {
2008
- width: '50px',
2009
- height: '30px',
2010
- transform: 'scale(2)',
2011
- marginTop: '-3px'
2012
- },
2013
- xmlns: "http://www.w3.org/2000/svg",
2014
- viewBox: "0 0 68 36"
2015
- }, /*#__PURE__*/React.createElement("line", {
2016
- x1: "50.85",
2017
- y1: "29.79",
2018
- x2: "17.15",
2019
- y2: "6.21"
2020
- }), /*#__PURE__*/React.createElement("line", {
2021
- x1: "17.15",
2022
- y1: "29.79",
2023
- x2: "50.85",
2024
- y2: "6.21"
2025
- }), /*#__PURE__*/React.createElement("path", {
2026
- style: {
2027
- transition: 'all 0.2s'
2028
- },
2029
- className: "paren",
2030
- d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
2031
- }), /*#__PURE__*/React.createElement("path", {
2032
- style: {
2033
- transition: 'all 0.2s'
2034
- },
2035
- className: "paren",
2036
- d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
2037
- })));
2038
- };
2039
-
2040
- var Layout = function Layout(_ref) {
2041
- var title = _ref.title,
2042
- description = _ref.description,
2043
- card = _ref.card,
2044
- children = _ref.children,
2045
- status = _ref.status,
2046
- nav = _ref.nav,
2047
- settings = _ref.settings,
2048
- _ref$footer = _ref.footer,
2049
- footer = _ref$footer === void 0 ? true : _ref$footer,
2050
- _ref$header = _ref.header,
2051
- header = _ref$header === void 0 ? true : _ref$header,
2052
- _ref$metadata = _ref.metadata,
2053
- metadata = _ref$metadata === void 0 ? 'mouse' : _ref$metadata,
2054
- _ref$links = _ref.links,
2055
- links = _ref$links === void 0 ? 'remote' : _ref$links,
2056
- _ref$dimmer = _ref.dimmer,
2057
- dimmer = _ref$dimmer === void 0 ? 'bottom' : _ref$dimmer,
2058
- _ref$guide = _ref.guide,
2059
- guide = _ref$guide === void 0 ? true : _ref$guide,
2060
- _ref$scrollbar = _ref.scrollbar,
2061
- scrollbar = _ref$scrollbar === void 0 ? true : _ref$scrollbar,
2062
- _ref$fade = _ref.fade,
2063
- fade = _ref$fade === void 0 ? true : _ref$fade,
2064
- _ref$container = _ref.container,
2065
- container = _ref$container === void 0 ? true : _ref$container;
2066
- var content = children;
2067
-
2068
- if (fade) {
2069
- content = /*#__PURE__*/React.createElement(FadeIn, {
2070
- duration: 250
2071
- }, content);
2072
- }
2073
-
2074
- if (container) {
2075
- content = /*#__PURE__*/React.createElement(Box, {
2076
- sx: {
2077
- mb: [8, 8, 9, 10]
2078
- }
2079
- }, /*#__PURE__*/React.createElement(Container, null, content));
2080
- }
2081
-
2082
- var _useThemeUI = useThemeUI(),
2083
- theme = _useThemeUI.theme;
2084
-
2085
- useEffect(function () {
2086
- if (!theme) return;
2087
-
2088
- var handler = function handler(e) {
2089
- if (e.matches && settings != null && settings.value && settings != null && settings.onClick) {
2090
- settings == null ? void 0 : settings.onClick();
2091
- }
2092
- };
2093
-
2094
- var query = window.matchMedia("(min-width: " + theme.breakpoints[1] + ")");
2095
- query.onchange = handler;
2096
- return function () {
2097
- query.onchange = null;
2098
- };
2099
- }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
2100
- var menuItems = [/*#__PURE__*/React.createElement(Dimmer, {
2101
- key: "dimmer",
2102
- sx: {
2103
- color: 'primary',
2104
- mt: '-2px',
2105
- display: ['block', 'block', dimmer === 'top' ? 'block' : 'none', dimmer === 'top' ? 'block' : 'none']
2106
- }
2107
- })];
2108
-
2109
- if (settings) {
2110
- menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
2111
- key: "settings",
2112
- sx: {
2113
- mr: ['2px'],
2114
- display: ['inherit', 'inherit', 'none', 'none']
2115
- }
2116
- }, settings)));
2117
- }
2118
-
2119
- return /*#__PURE__*/React.createElement(React.Fragment, null, guide && /*#__PURE__*/React.createElement(Guide, {
2120
- color: guide
2121
- }), scrollbar && /*#__PURE__*/React.createElement(Scrollbar, null), /*#__PURE__*/React.createElement(Meta, {
2122
- card: card,
2123
- description: description,
2124
- title: title
2125
- }), /*#__PURE__*/React.createElement(Flex, {
2126
- sx: {
2127
- flexDirection: 'column',
2128
- minHeight: '100vh'
2129
- }
2130
- }, header && /*#__PURE__*/React.createElement(Box, {
2131
- as: "header",
2132
- sx: {
2133
- width: '100%',
2134
- borderStyle: 'solid',
2135
- borderColor: 'muted',
2136
- borderWidth: '0px',
2137
- borderBottomWidth: '1px',
2138
- position: 'sticky',
2139
- top: 0,
2140
- bg: 'background',
2141
- height: '56px',
2142
- zIndex: 2000
2143
- }
2144
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
2145
- mode: links,
2146
- status: status,
2147
- nav: nav,
2148
- menuItems: menuItems
2149
- }))), /*#__PURE__*/React.createElement(Box, {
2150
- sx: {
2151
- width: '100%',
2152
- flex: '1 1 auto'
2153
- }
2154
- }, content), footer && /*#__PURE__*/React.createElement(Box, {
2155
- as: "footer",
2156
- sx: {
2157
- width: '100%',
2158
- borderStyle: 'solid',
2159
- borderColor: 'muted',
2160
- borderWidth: '0px',
2161
- borderTopWidth: '1px'
2162
- }
2163
- }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Footer, null))), dimmer === 'bottom' && /*#__PURE__*/React.createElement(Box, {
2164
- sx: {
2165
- display: ['none', 'none', 'initial', 'initial'],
2166
- position: ['fixed'],
2167
- right: [13],
2168
- bottom: [17, 17, 15, 15]
2169
- }
2170
- }, /*#__PURE__*/React.createElement(Dimmer, null)), metadata && /*#__PURE__*/React.createElement(Metadata, {
2171
- mode: metadata
2172
- })));
2173
- };
2174
-
2175
- var Custom404 = function Custom404() {
2176
- return /*#__PURE__*/React.createElement(Layout, {
2177
- footer: false,
2178
- title: '404 / carbonplan'
2179
- }, /*#__PURE__*/React.createElement(Row, {
2180
- sx: {
2181
- mb: [5, 0, 0],
2182
- pt: [0, 0, 6]
2183
- }
2184
- }, /*#__PURE__*/React.createElement(Column, {
2185
- start: [1, 1, 3, 3],
2186
- width: [6, 4, 4, 4]
2187
- }, /*#__PURE__*/React.createElement(Styled.h1, null, "Oops!"), /*#__PURE__*/React.createElement(Box, {
2188
- sx: {
2189
- fontSize: [4, 4, 4, 5],
2190
- lineHeight: 'h3',
2191
- mt: [3, 4, 4],
2192
- mb: [2, 3, 3],
2193
- maxWidth: ['90%', '90%', '400px']
2194
- }
2195
- }, "Sorry but we can't seem to find the page you are looking for."), /*#__PURE__*/React.createElement(Box, {
2196
- sx: {
2197
- color: 'secondary',
2198
- fontFamily: 'mono',
2199
- letterSpacing: 'mono',
2200
- fontSize: [2, 2, 2, 3],
2201
- mt: [4, 5, 5]
2202
- }
2203
- }, "ERROR CODE 404")), /*#__PURE__*/React.createElement(Column, {
2204
- start: [2, 5, 7, 7],
2205
- width: [4, 4, 4, 4]
2206
- }, /*#__PURE__*/React.createElement(Box, {
2207
- sx: {
2208
- width: ['100%'],
2209
- mt: [2, 4, 4, 5],
2210
- fill: 'primary'
2211
- }
2212
- }, /*#__PURE__*/React.createElement(PoopSad, {
2213
- sx: {
2214
- width: '100%',
2215
- height: 'auto'
2216
- }
2217
- })))));
2218
- };
2219
-
2220
- var Expander = function Expander(_ref) {
2221
- var value = _ref.value,
2222
- id = _ref.id,
2223
- onClick = _ref.onClick,
2224
- sx = _ref.sx;
2225
- return /*#__PURE__*/React.createElement(IconButton, {
2226
- onClick: onClick,
2227
- id: id,
2228
- role: "checkbox",
2229
- "aria-checked": value,
2230
- "aria-label": "Expand",
2231
- sx: _extends({
2232
- display: 'inline-block',
2233
- width: 24,
2234
- height: 24,
2235
- p: [1],
2236
- cursor: 'pointer',
2237
- fill: 'secondary',
2238
- stroke: 'secondary',
2239
- '@media (hover: hover) and (pointer: fine)': {
2240
- '&:hover': {
2241
- fill: 'primary',
2242
- stroke: 'primary'
2243
- }
2244
- }
2245
- }, sx)
2246
- }, /*#__PURE__*/React.createElement("svg", {
2247
- viewBox: "0 0 16 16"
2248
- }, /*#__PURE__*/React.createElement("path", {
2249
- d: "M8,0 V16 M0,8 H16",
2250
- style: {
2251
- strokeWidth: 2,
2252
- transition: '0.25s all',
2253
- transformOrigin: '8px 8px',
2254
- transform: value ? 'rotate(45deg)' : ''
2255
- }
2256
- })));
2257
- };
2258
-
2259
- var _excluded$5 = ["label", "value", "sx", "children"];
2260
-
2261
- var Tag = function Tag(_ref) {
2262
- var label = _ref.label,
2263
- value = _ref.value,
2264
- sx = _ref.sx,
2265
- children = _ref.children,
2266
- props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
2267
-
2268
- var color = sx && sx.color ? sx.color : 'primary';
2269
- var isClickable = props && (props.onClick || props.onDoubleClick);
2270
- return /*#__PURE__*/React.createElement(Box, _extends({
2271
- as: isClickable ? 'button' : 'span',
2272
- role: "checkbox",
2273
- "aria-checked": value,
2274
- "aria-label": label,
2275
- sx: _extends({
2276
- display: 'inline-block',
2277
- fontSize: [1, 1, 1, 2],
2278
- fontFamily: 'mono',
2279
- letterSpacing: 'mono',
2280
- cursor: isClickable ? 'pointer' : 'inherit',
2281
- color: color,
2282
- backgroundColor: 'transparent',
2283
- borderStyle: 'solid',
2284
- borderColor: color,
2285
- lineHeight: 'body',
2286
- borderWidth: '0px',
2287
- borderBottomWidth: '1px',
2288
- textTransform: 'uppercase',
2289
- userSelect: 'none',
2290
- transition: 'opacity 0.05s',
2291
- pt: ['1px'],
2292
- pb: ['2px'],
2293
- px: [0],
2294
- m: [0],
2295
- opacity: value == null || value ? 1 : color == 'primary' ? 0.24 : 0.33
2296
- }, sx)
2297
- }, props), children);
2298
- };
2299
-
2300
- var _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
2301
- var sx = {
2302
- label: {
2303
- fontFamily: 'mono',
2304
- letterSpacing: 'mono',
2305
- fontSize: [1, 1, 1, 2],
2306
- color: 'secondary',
2307
- userSelect: 'none',
2308
- textTransform: 'uppercase'
2309
- }
2310
- };
2311
-
2312
- var duplicateOptions = function duplicateOptions(options, defaultValue, overrides) {
2313
- if (overrides === void 0) {
2314
- overrides = {};
2315
- }
2316
-
2317
- return Object.keys(options).reduce(function (o, key) {
2318
- var _Object$assign;
2319
-
2320
- return Object.assign(o, (_Object$assign = {}, _Object$assign[key] = overrides[key] || defaultValue, _Object$assign));
2321
- }, {});
2322
- };
2323
-
2324
- var isAll = function isAll(option) {
2325
- return Object.keys(option).filter(function (d) {
2326
- return option[d];
2327
- }).length == Object.keys(option).length;
2328
- };
2329
-
2330
- var updateValues = function updateValues(_ref) {
2331
- var values = _ref.values,
2332
- multiSelect = _ref.multiSelect,
2333
- setValues = _ref.setValues,
2334
- value = _ref.value;
2335
- var isAllAlreadySelected = isAll(values);
2336
- var isSelectingAll = value === 'all';
2337
- var updatedToggle;
2338
-
2339
- if (multiSelect) {
2340
- if (isSelectingAll && !isAllAlreadySelected) {
2341
- // select all
2342
- updatedToggle = duplicateOptions(values, true);
2343
- } else if (isSelectingAll && isAllAlreadySelected) {
2344
- // deselect all
2345
- updatedToggle = duplicateOptions(values, false);
2346
- } else {
2347
- var _extends2;
2348
-
2349
- // de/select value, inherit other values
2350
- updatedToggle = _extends({}, values, (_extends2 = {}, _extends2[value] = !values[value], _extends2));
2351
- }
2352
- } else {
2353
- if (isSelectingAll && !isAllAlreadySelected) {
2354
- // select all
2355
- updatedToggle = duplicateOptions(values, true);
2356
- } else if (isSelectingAll && isAllAlreadySelected) ; else {
2357
- var _duplicateOptions;
2358
-
2359
- // select only value
2360
- updatedToggle = duplicateOptions(values, false, (_duplicateOptions = {}, _duplicateOptions[value] = true, _duplicateOptions));
2361
- }
2362
- }
2363
-
2364
- if (updatedToggle) {
2365
- setValues(updatedToggle);
2366
- }
2367
- };
2368
-
2369
- var Filter = function Filter(_ref2) {
2370
- var values = _ref2.values,
2371
- setValues = _ref2.setValues,
2372
- label = _ref2.label,
2373
- colors = _ref2.colors,
2374
- _ref2$showAll = _ref2.showAll,
2375
- showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
2376
- _ref2$multiSelect = _ref2.multiSelect,
2377
- multiSelect = _ref2$multiSelect === void 0 ? false : _ref2$multiSelect,
2378
- props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
2379
-
2380
- return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
2381
- sx: sx.label
2382
- }, label), /*#__PURE__*/React.createElement(Box, {
2383
- sx: {
2384
- mt: label ? [3] : 0
2385
- }
2386
- }, showAll && /*#__PURE__*/React.createElement(Tag, {
2387
- onClick: function onClick() {
2388
- return updateValues({
2389
- values: values,
2390
- multiSelect: multiSelect,
2391
- setValues: setValues,
2392
- value: 'all'
2393
- });
2394
- },
2395
- value: isAll(values),
2396
- sx: {
2397
- mr: [2]
2398
- }
2399
- }, "All"), Object.keys(values).map(function (d, i) {
2400
- return /*#__PURE__*/React.createElement(Tag, {
2401
- onClick: function onClick() {
2402
- return updateValues({
2403
- values: values,
2404
- multiSelect: multiSelect,
2405
- setValues: setValues,
2406
- value: d
2407
- });
2408
- },
2409
- onDoubleClick: function onDoubleClick() {
2410
- return updateValues({
2411
- values: values,
2412
- multiSelect: false,
2413
- setValues: setValues,
2414
- value: d
2415
- });
2416
- },
2417
- key: i,
2418
- value: values[d],
2419
- sx: {
2420
- width: 'max-content',
2421
- color: colors ? colors[d] : 'primary',
2422
- mr: [2],
2423
- mb: [1]
2424
- }
2425
- }, d);
2426
- })));
2427
- };
2428
-
2429
- var sizes = {
2430
- xs: [1],
2431
- sm: [3],
2432
- md: [5],
2433
- lg: [7],
2434
- xl: [9]
2435
- };
2436
-
2437
- var Group = function Group(_ref) {
2438
- var children = _ref.children,
2439
- _ref$direction = _ref.direction,
2440
- direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
2441
- _ref$spacing = _ref.spacing,
2442
- spacing = _ref$spacing === void 0 ? 'md' : _ref$spacing;
2443
- var marginValue;
2444
-
2445
- if (typeof spacing === 'string') {
2446
- marginValue = sizes[spacing];
2447
- } else if (typeof spacing === 'number') {
2448
- marginValue = [spacing];
2449
- } else if (Array.isArray(spacing) && spacing.every(function (el) {
2450
- return typeof el === 'number';
2451
- })) {
2452
- marginValue = spacing;
2453
- }
2454
-
2455
- if (!marginValue) {
2456
- throw new Error('Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl');
2457
- }
2458
-
2459
- if (!['horizontal', 'vertical'].includes(direction)) {
2460
- throw new Error('Invalid direction value. Must be either horizontal or vertical');
2461
- }
2462
-
2463
- var marginProperty = direction === 'vertical' ? 'mt' : 'ml';
2464
- var additionalStyles = direction === 'horizontal' ? {
2465
- display: 'inline-block'
2466
- } : {};
2467
- return /*#__PURE__*/React.createElement(Box, null, React.Children.map(children, function (child, i) {
2468
- var _extends2;
2469
-
2470
- return /*#__PURE__*/React.createElement(Box, {
2471
- sx: _extends((_extends2 = {}, _extends2[marginProperty] = i > 0 ? marginValue : 0, _extends2), additionalStyles)
2472
- }, child);
2473
- }));
2474
- };
2475
-
2476
- var _excluded$3 = ["size", "inverted", "sx"];
2477
-
2478
- var Input = function Input(_ref, ref) {
2479
- var _extends2;
2480
-
2481
- var _ref$size = _ref.size,
2482
- size = _ref$size === void 0 ? 'sm' : _ref$size,
2483
- inverted = _ref.inverted,
2484
- sx = _ref.sx,
2485
- props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
2486
-
2487
- var defaultColor = inverted ? 'secondary' : 'primary';
2488
-
2489
- var styles = _extends((_extends2 = {
2490
- color: defaultColor,
2491
- borderColor: 'secondary',
2492
- borderStyle: 'solid',
2493
- borderWidth: '0px',
2494
- borderBottomWidth: '1px',
2495
- borderRadius: '0px',
2496
- transition: 'border 0.15s'
2497
- }, _extends2["borderBottomWidth"] = '1px', _extends2.width = 'calc(min(15ch, 100%))', _extends2.p = [0], _extends2.py = ['2px'], _extends2['input::-webkit-outer-spin-button'] = {
2498
- WebkitAppearance: 'none',
2499
- margin: 0
2500
- }, _extends2['input::-webkit-inner-spin-button'] = {
2501
- WebkitAppearance: 'none',
2502
- margin: 0
2503
- }, _extends2[':focus'] = {
2504
- borderColor: 'primary'
2505
- }, _extends2[':focus-visible'] = {
2506
- outline: 'none !important',
2507
- background: 'none !important'
2508
- }, _extends2), getSizeStyles(size), sx);
2509
-
2510
- return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
2511
- ref: ref,
2512
- sx: styles
2513
- }));
2514
- };
2515
-
2516
- var input = forwardRef(Input);
2517
-
2518
- var getProps = function getProps(test) {
2519
- return function (props) {
2520
- var next = {};
2521
-
2522
- for (var key in props) {
2523
- if (test(key || '')) next[key] = props[key];
2524
- }
2525
-
2526
- return next;
2527
- };
2528
- };
2529
-
2530
- var _excluded$2 = ["children", "size", "sx", "sxSelect"];
2531
-
2532
- var Select = function Select(_ref) {
2533
- var _extends2;
2534
-
2535
- var children = _ref.children,
2536
- _ref$size = _ref.size,
2537
- size = _ref$size === void 0 ? 'sm' : _ref$size,
2538
- sx = _ref.sx,
2539
- sxSelect = _ref.sxSelect,
2540
- props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
2541
-
2542
- var color = sx && sx.color ? sx.color : 'primary';
2543
- var sizeStyles = getSizeStyles(size);
2544
- var ref = useRef(null);
2545
- var _onChange = props.onChange;
2546
- var omitOnChange = getProps(function (k) {
2547
- return k !== 'onChange';
2548
- })(props);
2549
-
2550
- if (!['xs', 'sm', 'md'].includes(size)) {
2551
- throw new Error('Size must be xs, sm, or md');
2552
- }
2553
-
2554
- var pr, height, width, ml, top;
2555
-
2556
- if (size === 'xs') {
2557
- height = [14, 14, 14, 16];
2558
- width = [14, 14, 14, 14];
2559
- top = ['1px'];
2560
- ml = ['-14px', '-14px', '-14px', '-16px'];
2561
- }
2562
-
2563
- if (size === 'sm') {
2564
- height = [15, 15, 15, 20];
2565
- width = [15, 15, 15, 20];
2566
- top = ['1px'];
2567
- ml = ['-16px', '-16px', '-16px', '-20px'];
2568
- }
2569
-
2570
- if (size === 'md') {
2571
- height = [20, 20, 20, 20];
2572
- width = [20, 20, 20, 20];
2573
- top = ['2px'];
2574
- ml = ['-20px', '-20px', '-20px', '-20px'];
2575
- }
2576
-
2577
- pr = width.map(function (d) {
2578
- return d + 12;
2579
- });
2580
- return /*#__PURE__*/React.createElement(Box, {
2581
- sx: _extends({
2582
- display: 'inline-block'
2583
- }, sx)
2584
- }, /*#__PURE__*/React.createElement(Box, _extends({
2585
- as: "select",
2586
- ref: ref,
2587
- onChange: function onChange(e) {
2588
- ref.current.blur();
2589
- if (_onChange) _onChange(e);
2590
- },
2591
- sx: _extends({}, sizeStyles, (_extends2 = {
2592
- lineHeight: 'normal',
2593
- cursor: 'pointer',
2594
- WebkitAppearance: 'none',
2595
- MozAppearance: 'none',
2596
- pb: ['5px'],
2597
- bg: 'transparent',
2598
- pr: pr,
2599
- border: 'none',
2600
- borderBottomStyle: 'solid',
2601
- borderBottomWidth: '1px',
2602
- borderBottomColor: 'primary',
2603
- borderRadius: '0px',
2604
- color: 'text',
2605
- width: 'fit-content'
2606
- }, _extends2["color"] = color, _extends2.userSelect = 'none', _extends2['@media (hover: none) and (pointer: coarse)'] = {
2607
- '&:focus-visible': {
2608
- outline: 'none !important',
2609
- background: 'transparent !important'
2610
- }
2611
- }, _extends2), sxSelect)
2612
- }, omitOnChange), children), /*#__PURE__*/React.createElement(Arrow, {
2613
- sx: {
2614
- width: width,
2615
- height: height,
2616
- position: 'relative',
2617
- ml: ml,
2618
- top: top,
2619
- fill: 'secondary',
2620
- transform: 'rotate(135deg)',
2621
- pointerEvents: 'none'
2622
- }
2623
- }));
2624
- };
2625
-
2626
- var _excluded$1 = ["sx"];
2627
-
2628
- var Slider = function Slider(_ref, ref) {
2629
- var sx = _ref.sx,
2630
- props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
2631
-
2632
- var color = sx && sx.color ? sx.color : 'primary';
2633
-
2634
- var _useThemeUI = useThemeUI(),
2635
- colors = _useThemeUI.theme.rawColors;
2636
-
2637
- return /*#__PURE__*/React.createElement(Slider$1, _extends({
2638
- ref: ref,
2639
- sx: _extends({
2640
- '&::-webkit-slider-thumb': {
2641
- height: [22, 18, 16],
2642
- width: [22, 18, 16],
2643
- boxShadow: "0 0 0 0px " + colors.secondary,
2644
- transition: 'box-shadow .15s ease'
2645
- },
2646
- '&::-moz-range-thumb': {
2647
- height: [22, 18, 16],
2648
- width: [22, 18, 16],
2649
- boxShadow: "0 0 0 0px " + colors.secondary,
2650
- transition: 'box-shadow .15s ease'
2651
- },
2652
- ':focus-visible': {
2653
- outline: 'none !important',
2654
- background: colors.secondary + " !important"
2655
- },
2656
- ':focus': {
2657
- color: color,
2658
- '&::-webkit-slider-thumb': {
2659
- boxShadow: "0 0 0 4px " + colors.secondary
2660
- },
2661
- '&::-moz-range-thumb': {
2662
- boxShadow: "0 0 0 4px " + colors.secondary
2663
- }
2664
- },
2665
- color: color
2666
- }, sx)
2667
- }, props));
2668
- };
2669
-
2670
- var slider = forwardRef(Slider);
2671
-
2672
- var styles = {
2673
- reset: {
2674
- verticalAlign: 'baseline',
2675
- border: 0,
2676
- outline: 0,
2677
- margin: 0,
2678
- padding: 0
2679
- },
2680
- row: {
2681
- borderStyle: 'solid',
2682
- borderWidth: '0px',
2683
- borderTopWidth: '1px',
2684
- borderColor: 'muted',
2685
- pt: [3, 3, 3, '20px'],
2686
- pb: [3, 3, 3, '20px'],
2687
- mb: ['2px']
2688
- },
2689
- header: {
2690
- display: 'block',
2691
- textTransform: 'uppercase',
2692
- letterSpacing: 'smallcaps',
2693
- fontFamily: 'heading',
2694
- fontSize: [2, 2, 2, 3]
2695
- },
2696
- index: {
2697
- display: 'block',
2698
- textTransform: 'uppercase',
2699
- letterSpacing: 'smallcaps',
2700
- fontFamily: 'heading',
2701
- fontSize: [2, 2, 2, 3]
2702
- },
2703
- entry: {
2704
- display: 'block',
2705
- fontSize: [2, 2, 2, 3],
2706
- fontFamily: 'faux',
2707
- letterSpacing: 'faux',
2708
- mb: ['1px'],
2709
- mt: [2, 0, 0, 0]
2710
- }
2711
- };
2712
-
2713
- var Table = function Table(_ref) {
2714
- var data = _ref.data,
2715
- sx = _ref.sx,
2716
- color = _ref.color,
2717
- header = _ref.header,
2718
- columns = _ref.columns,
2719
- start = _ref.start,
2720
- width = _ref.width,
2721
- _ref$index = _ref.index,
2722
- index = _ref$index === void 0 ? true : _ref$index,
2723
- _ref$borderBottom = _ref.borderBottom,
2724
- borderBottom = _ref$borderBottom === void 0 ? true : _ref$borderBottom,
2725
- _ref$borderTop = _ref.borderTop,
2726
- borderTop = _ref$borderTop === void 0 ? true : _ref$borderTop;
2727
-
2728
- if (!start || !columns || !width) {
2729
- throw new Error('Must provide columns, start, and width');
2730
- }
2731
-
2732
- return /*#__PURE__*/React.createElement(Box, {
2733
- as: "table",
2734
- sx: _extends({
2735
- display: 'block'
2736
- }, sx)
2737
- }, /*#__PURE__*/React.createElement(Box, {
2738
- as: "tbody",
2739
- sx: {
2740
- display: 'block'
2741
- }
2742
- }, header && /*#__PURE__*/React.createElement(Row, {
2743
- as: "tr",
2744
- sx: _extends({}, styles.reset, styles.header, styles.row, {
2745
- color: color,
2746
- borderTopWidth: !borderTop ? '0px' : '1px'
2747
- })
2748
- }, /*#__PURE__*/React.createElement(Column, {
2749
- as: "td",
2750
- start: [1],
2751
- width: columns,
2752
- sx: styles.index
2753
- }, header)), data.map(function (row, i) {
2754
- return /*#__PURE__*/React.createElement(Row, {
2755
- as: "tr",
2756
- columns: columns,
2757
- key: i,
2758
- sx: _extends({}, styles.reset, styles.row, {
2759
- pb: borderBottom && i === data.length - 1 ? ['18px', '18px', '18px', '22px'] : [3, 3, 3, '20px'],
2760
- borderBottomWidth: borderBottom && i === data.length - 1 ? '1px' : '0px',
2761
- borderTopWidth: !borderTop && i === 0 && !header ? '0px' : '1px'
2762
- })
2763
- }, row.map(function (column, j) {
2764
- return /*#__PURE__*/React.createElement(Column, {
2765
- as: "td",
2766
- key: j,
2767
- start: start[j],
2768
- width: width[j],
2769
- sx: j == 0 && index ? _extends({}, styles.reset, styles.index) : _extends({}, styles.reset, styles.entry)
2770
- }, column);
2771
- }));
2772
- })));
2773
- };
2774
-
2775
- var _excluded = ["value", "onClick", "disabled", "sx"];
2776
-
2777
- var Toggle = function Toggle(_ref, ref) {
2778
- var value = _ref.value,
2779
- onClick = _ref.onClick,
2780
- disabled = _ref.disabled,
2781
- sx = _ref.sx,
2782
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
2783
-
2784
- var color = sx && sx.color ? sx.color : 'primary';
2785
- value = disabled ? false : value;
2786
- return /*#__PURE__*/React.createElement(Box, _extends({
2787
- ref: ref,
2788
- as: "button",
2789
- onClick: onClick,
2790
- role: "checkbox",
2791
- "aria-checked": value,
2792
- "aria-label": "Toggle",
2793
- sx: _extends({
2794
- border: 'none',
2795
- background: 'none',
2796
- cursor: disabled ? 'default' : 'pointer',
2797
- p: [0],
2798
- m: [0],
2799
- display: 'inline-block'
2800
- }, sx)
2801
- }, props), /*#__PURE__*/React.createElement(Box, {
2802
- sx: {
2803
- width: '50px',
2804
- height: '20px',
2805
- borderRadius: '20px',
2806
- backgroundColor: value ? transparentize(color, color == 'primary' ? 0.5 : 0.45) : 'muted',
2807
- position: 'relative',
2808
- transition: '0.15s',
2809
- display: 'inline-block'
2810
- }
2811
- }, /*#__PURE__*/React.createElement(Box, {
2812
- sx: {
2813
- width: '14px',
2814
- height: '14px',
2815
- borderRadius: '7px',
2816
- position: 'absolute',
2817
- left: value ? '32px' : '4px',
2818
- top: '3px',
2819
- backgroundColor: value ? color : 'secondary',
2820
- transition: '0.15s'
2821
- }
2822
- })));
2823
- };
2824
-
2825
- var toggle = forwardRef(Toggle);
2826
-
2827
- var Tracking = function Tracking(_ref) {
2828
- var id = _ref.id;
2829
-
2830
- if (!id) {
2831
- return null;
2832
- }
2833
-
2834
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("script", {
2835
- async: true,
2836
- src: "https://www.googletagmanager.com/gtag/js?id=" + id
2837
- }), /*#__PURE__*/React.createElement("script", {
2838
- dangerouslySetInnerHTML: {
2839
- __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 "
2840
- }
2841
- }));
2842
- };
2843
-
2844
- var Tray = function Tray(_ref) {
2845
- var expanded = _ref.expanded,
2846
- sx = _ref.sx,
2847
- children = _ref.children;
2848
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
2849
- sx: {
2850
- position: 'fixed',
2851
- top: '56px',
2852
- bottom: '0px',
2853
- left: '0px',
2854
- width: 'calc(100vw)',
2855
- mt: ['56px'],
2856
- bg: 'background',
2857
- zIndex: 1000,
2858
- transition: 'opacity 0.15s',
2859
- opacity: expanded ? 0.9 : 0,
2860
- pointerEvents: expanded ? 'all' : 'none'
2861
- }
2862
- }), /*#__PURE__*/React.createElement(Box, {
2863
- sx: _extends({
2864
- position: 'fixed',
2865
- width: 'calc(100vw)',
2866
- top: '0px',
2867
- mt: ['56px'],
2868
- pb: [6, 7, 7, 8],
2869
- pt: [5, 6, 7, 8],
2870
- bg: 'background',
2871
- zIndex: 1100,
2872
- borderStyle: 'solid',
2873
- borderColor: 'muted',
2874
- borderWidth: '0px',
2875
- borderBottomWidth: '1px',
2876
- transition: 'transform 0.15s',
2877
- ml: [-3, -4, -5, -6],
2878
- pl: [3, 4, 5, 6],
2879
- pr: [3, 4, 5, 6],
2880
- transform: expanded ? 'translateY(0)' : 'translateY(-100%)'
2881
- }, sx)
2882
- }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
2883
- start: [1, 1, 1, 1],
2884
- width: [6, 8, 10, 10]
2885
- }, children))));
2886
- };
2887
-
2888
- var defaultOptions = {
2889
- month: 'short',
2890
- day: 'numeric',
2891
- year: 'numeric'
2892
- };
2893
-
2894
- var formatDateElement = function formatDateElement(date, element, option) {
2895
- var _date$toLocaleString;
2896
-
2897
- if (!option) {
2898
- return null;
2899
- }
2900
-
2901
- var format = typeof option === 'string' ? option : defaultOptions[element];
2902
- var result = date.toLocaleString('default', (_date$toLocaleString = {}, _date$toLocaleString[element] = format, _date$toLocaleString));
2903
-
2904
- if (format === 'numeric' && ['day', 'month'].includes(element)) {
2905
- return result.padStart(2, '0');
2906
- } else {
2907
- return result;
2908
- }
2909
- };
2910
-
2911
- var formatDate = function formatDate(date, options) {
2912
- var _options$separator;
2913
-
2914
- if (options === void 0) {
2915
- options = defaultOptions;
2916
- }
2917
-
2918
- var d = new Date(date.replace(/-/g, '/'));
2919
- var month = formatDateElement(d, 'month', options.month);
2920
- var day = formatDateElement(d, 'day', options.day);
2921
- var year = formatDateElement(d, 'year', options.year);
2922
- return [month, day, year].filter(Boolean).join((_options$separator = options.separator) != null ? _options$separator : ' ');
2923
- };
2924
-
2925
- 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=["href","children","internal","tracking"],T=t(function(t,n){var r=t.href,o=t.children,a=t.internal,i=void 0!==a&&a,l=t.tracking,s=void 0!==l&&l,m=M(t,W);if(i||r&&r.startsWith("/"))return e.createElement(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)}),F=function(e){if(!["xs","sm","md","lg","xl"].includes(e))throw new Error("Size must be xs, sm, md, lg, or xl");var t,n,r,o;return"xs"===e&&(t=[2,2,2,3],n="body",r="body",o=[1.2]),"sm"===e&&(t=[3,3,3,4],n="body",r="body",o=[1.2]),"md"===e&&(t=[4,4,4,5],n="body",r="body",o=[1.2]),"lg"===e&&(t=[5,5,6,7],n="heading",r="heading",o=[1.2,1.2,1.25,1.25]),"xl"===e&&(t=[6,7,8,9],n="heading",r="heading",o=[1.25]),{fontSize:t,fontFamily:n,letterSpacing:r,lineHeight:o}},B=["size","prefix","suffix","inverted","sx","children","align","href","internal","tracking"],I=t(function(t,r){var o,a,i,c,s,m=t.size,p=void 0===m?"sm":m,d=t.prefix,u=t.suffix,x=t.inverted,h=t.sx,f=t.children,g=t.align,y=t.href,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,I=W||(x?"secondary":"primary"),D=W||x?"primary":"secondary";"xs"===p&&(a=["6px","6px","6px","6px"],i=[12,12,12,13],c=[12,12,12,13],s=[1.5,1.5,1.5,1.5],o={transform:"translateY(0.25px)"}),"sm"===p&&(a=["7px","7px","7px","7px"],i=[13,13,13,18],c=[13,13,13,18],s=[1.5,1.5,1.5,2],o={transform:"translateY(0.25px)"}),"md"===p&&(a=["8px","8px","8px","8px"],i=[18,18,18,24],c=[18,18,18,24],s=[2,2,2,3]),"lg"===p&&(a=["10px","10px","12px","16px"],i=[24,24,34,46],c=[24,24,34,46],s=[3,3,4,5]),"xl"===p&&(a=["12px","16px","18px","20px"],i=[34,46,56,68],c=[34,46,56,68],s=[4,5,6,7]),g?(C=g,S=g):d&&u?(C="initial",S="initial"):d?C="initial":u&&(S="middle"),A="middle"===C?{}:o,L="middle"===S?{}:o,d&&(w={"&:hover > #prefix-span > #prefix":z({color:D},d.type.hover)},d=n(d,{id:"prefix",sx:z({position:"relative",height:i,width:c,mr:f?a:[0],strokeWidth:s,verticalAlign:C,transition:"color 0.15s, transform 0.15s"},d.props.sx)})),u&&(k={"&:hover > #suffix-span >#suffix":z({color:D},u.type.hover)},u=n(u,{id:"suffix",sx:z({height:i,width:c,ml:f?a:[0],strokeWidth:s,verticalAlign:S,transition:"color 0.15s, transform 0.15s"},u.props.sx)}));var O=z({},F(p),{lineHeight:1.05,border:"none",background:"transparent",display:"block",color:I,padding:[0],textAlign:"left",cursor:"pointer",width:"fit-content","@media (hover: hover) and (pointer: fine)":z({"&:hover":{color:D}},k,w)},h),R=e.createElement(e.Fragment,null,e.createElement(l,{as:"span",id:"prefix-span",sx:z({display:"inline-block"},A)},d&&d),e.createElement(l,{as:"span",sx:{transition:"color 0.15s"}},f),e.createElement(l,{as:"span",id:"suffix-span",sx:z({display:"inline-block"},L)},u&&u));return y?e.createElement(T,z({ref:r,href:y,internal:E,tracking:b,sx:z({},O,{textDecoration:"none"})},v),R):e.createElement(l,z({ref:r,as:"button",sx:O},v),R)}),D=["label","children","inverted","color","href","internal","tracking","sx"],O=t(function(t,n){var r=t.label,o=t.children,a=t.inverted,i=t.color,c=t.href,s=t.internal,m=t.tracking,p=t.sx,d=M(t,D),u=i||(a?"secondary":"primary"),x=i||a?"primary":"secondary",h=z({border:"none",padding:[0],fontSize:[3,3,3,4],color:u,background:"transparent",textDecoration:"none",fontFamily:"body",lineHeight:"h3",letterSpacing:"body",width:"fit-content",cursor:"pointer",textAlign:"left",mb:[1],"@media (hover: hover) and (pointer: fine)":{"&:hover > #container > #arrow":{transform:"rotate(45deg)",fill:x},"&:hover":{color:x}}},p),f=e.createElement(e.Fragment,null,e.createElement(l,{sx:{transition:"0.15s",letterSpacing:"body",pb:["6px"]}},o),e.createElement(l,{sx:{transition:"0.15s",display:"inline-block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]}},r),e.createElement(l,{as:"span",id:"container",sx:{ml:[2],display:"inline-block"}},e.createElement(v,{id:"arrow",sx:{transition:"fill 0.15s, transform 0.15s",position:"relative",top:["2px"],color:u,height:[15,15,15,17],width:[15,15,15,17]}})));return c?e.createElement(T,z({ref:n,href:c,internal:s,tracking:m,sx:h},d),f):e.createElement(l,z({ref:n,as:"button",sx:h},d),f)}),R=["colormap","label","clim","setClim","setClimStep","discrete","units","width","height","format","horizontal","bottom","sx","sxClim"],H=function(e){return{fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase","@media (hover: hover) and (pointer: fine)":{"&:hover":{borderBottom:e?function(e){return"solid 1px "+e.colors.primary+" !important"}:"unset"}},"&:focus":{outline:"none",borderBottom:e?function(e){return"solid 1px "+e.colors.primary+" !important"}:"unset"},transition:"border 0.15s",userSelect:e?"none !important":"unset",width:"fit-content",minWidth:"fit-content"}},_={width:["10px","16px","16px","17px"],height:["80px","110px","110px","130px"]},j=function(t){var n=t.colormap,r=t.discrete,o=t.horizontal,a=t.width,i=t.height,c=1/n.length*100,s="linear-gradient(to "+(o?"right":"top")+", "+n.map(function(e,t){return"rgb("+e+") "+t*c+"% "+(r&&t<n.length-1?(t+1)*c+"%":"")}).join(",")+")";return e.createElement(l,{sx:z({},o?{width:a||_.height,height:i||_.width}:{width:a||_.width,minHeight:i||_.height},{mt:o?["1px","1px","1px",0]:0,border:function(e){return"solid 1px "+e.colors.hinted},background:s})})},V=function(t){var n=t.label,r=t.units,o=t.horizontal;return e.createElement(l,{sx:!o&&{width:["13px","17px","17px","19px"],alignSelf:"flex-end"}},e.createElement(l,{sx:z({mb:o?0:["-4px","-4px","-4px","-3px"],fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase"},o?{}:{writingMode:"vertical-rl",transform:"rotate(180deg)",whiteSpace:"nowrap",display:"inline-block",overflow:"visible"})},n," ",e.createElement(l,{as:"span",sx:{textTransform:"none",color:"secondary",display:"inline-block"}},r)))},N=function(t){var n=t.colormap,i=t.label,c=t.clim,m=t.setClim,p=t.setClimStep,d=void 0===p?1:p,u=t.discrete,x=t.units,h=t.width,f=t.height,g=t.format,y=void 0===g?function(e){return e}:g,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,R);if(!Array.isArray(n))throw new Error("expected array for colormap, got '"+n+"'.");var A,L,W,T=[r(),r()],F=o(!1),B=F[0],I=F[1],D=o(!1),O=D[0],N=D[1],P=0,G=null,Y=[0,0],X=d,U=function(e){"min"!==G||B||I(!0),"max"!==G||O||N(!0),W=e.pageX-A,P=e.pageY-L,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])]}))},K=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&&I(!1),"max"===G&&N(!1)})};a(function(){var e=function(e){(["ArrowUp","ArrowRight"].includes(e.code)||["ArrowUp","ArrowRight"].includes(e.key))&&function(e){T[0].current===document.activeElement&&(e.preventDefault(),m(function(e){return[Math.min(e[0]+X,e[1]),e[1]]}),T[0].current.focus()),T[1].current===document.activeElement&&(e.preventDefault(),m(function(e){return[e[0],Math.max(e[1]+X,e[0])]}),T[1].current.focus())}(e),(["ArrowDown","ArrowLeft"].includes(e.code)||["ArrowDown","ArrowLeft"].includes(e.key))&&function(e){T[0].current===document.activeElement&&(e.preventDefault(),m(function(e){return[Math.min(e[0]-X,e[1]),e[1]]}),T[0].current.focus()),T[1].current===document.activeElement&&(e.preventDefault(),m(function(e){return[e[0],Math.max(e[1]-X,e[0])]}),T[1].current.focus())}(e)};return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}},[c]);var Z=function(){return e.createElement(l,{id:"min",ref:T[0],tabIndex:0,sx:z({},H(m),{ml:i?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?B?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?K:function(){},onClick:function(){return T[0].current.focus()}},y(c[0]))},q=function(){return e.createElement(l,{id:"max",ref:T[1],tabIndex:0,sx:z({},H(m),{ml:["2px","1px","1px","2px"],mt: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?K:function(){},onClick:function(){return T[1].current.focus()}},y(c[1]))};return e.createElement(s,z({},S,{sx:z({flexDirection:"row",alignItems:"start",justifyContent:"flex-start",gap:["3px","6px","6px","7px"],height:b?"unset":"100%"},k)}),i&&e.createElement(V,{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(Z,null),e.createElement(j,{colormap:n,horizontal:b,discrete:u,width:h,height:f}),b&&c&&!w&&e.createElement(q,null)),b&&c&&w&&e.createElement(s,{sx:{justifyContent:"space-between"}},e.createElement(Z,null),e.createElement(q,null))),!b&&e.createElement(s,{sx:{flexDirection:"column-reverse",justifyContent:"space-between",height:f||_.height}},c&&e.createElement(Z,null),c&&e.createElement(q,null)))},P=["start","width","dl","dr","children","sx"],G=function(t){var n=t.start,r=t.width,o=t.dl,a=t.dr,i=t.children,c=t.sx,s=M(t,P);r=r||"auto";var m=function(e){if(e&&!Array.isArray(e)&&(e=[e]),![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length?e=e.map(function(e){return[e,e,e,e]}).flat():Array.isArray(e)&&2==e.length&&(e=e.map(function(e){return[e,e]}).flat()),e};n=m(n=n||"auto"),r=m(r);var p,d,u=n.map(function(e,t){return"auto"==e?"auto":e+r[t]});if(o){if(![.5,1].includes(o))throw new Error("dl must be 0.5 or 1");.5===o&&(p=["-12px",-3,-3,-4]),1===o&&(p=[-4,-5,-5,-6])}if(a){if(![.5,1].includes(a))throw new Error("dr must be 0.5 or 1");.5===a&&(d=["-12px",-3,-3,-4]),1===a&&(d=[-4,-5,-5,-6])}return e.createElement(l,z({},s,{sx:z({gridColumnStart:n,gridColumnEnd:u,ml:p,mr:d},c)}),i)},Y=function(t){var n=t.title,r=t.description,o=t.card;return r=r||"Data and science for climate action.",o=o||"https://images.carbonplan.org/social/homepage.png",e.createElement(C,null,e.createElement("title",null,n=n||"carbonplan"),e.createElement("meta",{name:"description",content:r}),e.createElement("meta",{name:"viewport",content:"initial-scale=1.0, width=device-width"}),e.createElement("link",{rel:"canonical",content:"https://carbonplan.org/"}),e.createElement("link",{rel:"icon",type:"image/svg+xml",href:"https://images.carbonplan.org/favicon.svg"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"manifest",href:"https://images.carbonplan.org/manifest.json"}),e.createElement("meta",{name:"theme-color",content:"#1b1e23"}),e.createElement("link",{rel:"alternate icon",type:"image/png",href:"https://images.carbonplan.org/favicon.png"}),e.createElement("link",{rel:"mask-icon",href:"https://images.carbonplan.org/safari-pinned-tab.svg",color:"#000000"}),e.createElement("link",{rel:"apple-touch-icon",sizes:"180x180",href:"https://images.carbonplan.org/apple-touch-icon.png"}),e.createElement("meta",{name:"msapplication-TileColor",content:"#1b1e23"}),e.createElement("meta",{name:"msapplication-TileImage",content:"https://images.carbonplan.org/mstile-144x144.png"}),e.createElement("meta",{name:"msapplication-config",content:"https://images.carbonplan.org/browserconfig.xml"}),e.createElement("meta",{property:"og:title",content:n}),e.createElement("meta",{property:"og:description",content:r}),e.createElement("meta",{property:"og:image",content:o}),e.createElement("meta",{property:"og:url",content:"https://carbonplan.org"}),e.createElement("meta",{name:"twitter:title",content:n}),e.createElement("meta",{name:"twitter:description",content:r}),e.createElement("meta",{name:"twitter:image",content:o}),e.createElement("meta",{name:"twitter:card",content:"summary_large_image"}))},X=function(t){var n=z({},t);return e.createElement(l,z({as:"svg",width:"150",fill:"currentColor",stroke:"none",viewBox:"0 0 151.1 28.8"},n),e.createElement("g",null,e.createElement("g",null,e.createElement("path",{d:"M9.7,20.1c-1.3-1.4-2-3.1-2-5.2c0-2.1,0.7-3.9,2-5.2c1.3-1.4,3-2,5.1-2c1.7,0,3.1,0.4,4.3,1.3 c1.1,0.9,1.8,2.1,2.1,3.5c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.2,0.2h-2.3c-0.2,0-0.3-0.1-0.4-0.2c-0.3-0.8-0.7-1.4-1.3-1.8 c-0.6-0.4-1.4-0.6-2.2-0.6c-1.3,0-2.3,0.4-3,1.2c-0.8,0.8-1.1,1.9-1.1,3.4c0,1.5,0.4,2.6,1.1,3.4c0.8,0.8,1.8,1.2,3,1.2 c0.8,0,1.6-0.2,2.2-0.6c0.6-0.4,1.1-1,1.3-1.8c0.1-0.2,0.2-0.2,0.4-0.3H21c0.1,0,0.2,0.1,0.2,0.2c0,0.1,0,0.2,0,0.3 c-0.3,1.4-1,2.6-2.1,3.5c-1.1,0.9-2.5,1.3-4.3,1.3C12.7,22.1,11,21.4,9.7,20.1z"})),e.createElement("g",null,e.createElement("path",{d:"M22.5,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1C30.6,7.6,32,8.1,33,9c1,0.9,1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C23,20.1,22.5,19,22.5,17.6z M25.4,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C25.7,16.3,25.4,16.8,25.4,17.5z"})),e.createElement("g",null,e.createElement("path",{d:"M37,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.1c1-1.1,2.3-1.6,3.7-1.6 c0.8,0,1.7,0.1,2.5,0.4c0.2,0.1,0.3,0.3,0.3,0.5v2.2c0,0.2-0.1,0.3-0.2,0.3c0,0-0.1,0-0.2-0.1c-1.1-0.5-2-0.8-2.9-0.8 c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,3v7.3c0,0.2-0.1,0.3-0.3,0.3h-2.2C37.1,21.8,37,21.7,37,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M47.6,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3H50c0.2,0,0.3,0.1,0.3,0.3v6.5c1.3-1.1,2.7-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2c1.1,1.3,1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.8,0-3.2-0.5-4.3-1.6v1 c0,0.2-0.1,0.3-0.3,0.3h-2.2C47.7,21.8,47.6,21.7,47.6,21.6z M51.2,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3 s1.7,1.3,2.9,1.3c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3 C52.9,10.2,51.9,10.7,51.2,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M64.3,20.1c-1.4-1.4-2.1-3.1-2.1-5.2c0-2.1,0.7-3.9,2.1-5.2c1.4-1.4,3.1-2,5.2-2c2.1,0,3.8,0.7,5.2,2 c1.4,1.4,2.1,3.1,2.1,5.2c0,2.1-0.7,3.9-2.1,5.2c-1.4,1.4-3.1,2-5.2,2C67.4,22.1,65.7,21.4,64.3,20.1z M66.4,11.5 c-0.8,0.8-1.2,2-1.2,3.4c0,1.4,0.4,2.5,1.2,3.4s1.9,1.3,3.1,1.3c1.3,0,2.3-0.4,3.1-1.3c0.8-0.8,1.2-2,1.2-3.4 c0-1.4-0.4-2.5-1.2-3.4c-0.8-0.8-1.9-1.3-3.1-1.3C68.2,10.2,67.2,10.7,66.4,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M78.7,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C78.7,21.8,78.7,21.7,78.7,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M101.7,27.1V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1c1.1-1.1,2.5-1.6,4.3-1.6 c1.9,0,3.4,0.7,4.6,2s1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.5,0-3-0.5-4.3-1.6v6.6c0,0.2-0.1,0.3-0.3,0.3 H102C101.8,27.3,101.7,27.2,101.7,27.1z M105.3,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3s1.7,1.3,2.9,1.3 c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3C107,10.2,106,10.7,105.3,11.5z"})),e.createElement("g",null,e.createElement("path",{d:"M117.2,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v18.9c0,0.2-0.1,0.3-0.3,0.3h-2.2 C117.3,21.8,117.2,21.7,117.2,21.6z"})),e.createElement("g",null,e.createElement("path",{d:"M122,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1 c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3 c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1c1.7,0,3.1,0.5,4.2,1.4s1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6 c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2 C122.5,20.1,122,19,122,17.6z M124.9,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9 c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C125.2,16.3,124.9,16.8,124.9,17.5z"})),e.createElement("g",null,e.createElement("path",{d:"M136.9,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8 c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1 c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C137,21.8,136.9,21.7,136.9,21.6z"})),e.createElement("path",{d:"M97.6,14.9c0,4.2-0.6,8.3-1.6,12.3c0,0.1-0.1,0.2-0.2,0.2h-2.4c-0.1,0-0.2-0.1-0.2-0.3c1.1-3.9,1.7-8,1.7-12.2 s-0.6-8.3-1.7-12.2c0-0.1,0.1-0.3,0.2-0.3l2.4,0c0.1,0,0.2,0.1,0.2,0.2C97.1,6.5,97.6,10.6,97.6,14.9z"}),e.createElement("path",{d:"M1.4,14.9C1.4,10.6,2,6.5,3,2.6c0-0.1,0.1-0.2,0.2-0.2l2.4,0c0.1,0,0.2,0.1,0.2,0.3c-1.1,3.9-1.7,8-1.7,12.2 s0.6,8.3,1.7,12.2c0,0.1-0.1,0.3-0.2,0.3H3.3c-0.1,0-0.2-0.1-0.2-0.2C2,23.2,1.4,19.1,1.4,14.9z"})))},U=["children","sx","columns","gap"],K=function(t){var n,r,o=t.children,a=t.sx,i=t.columns,l=t.gap,c=M(t,U),s=function(e){if(Array.isArray(e)||(e=[e,e,e,e]),Array.isArray(e)&&![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length&&(e=e.map(function(e){return[e]}).flat()),Array.isArray(e)&&2==e.length&&(e=e.map(function(e){return[e,e]}).flat()),e};return Number.isInteger(l)||Array.isArray(l)?(n=l=s(l),r=l):(n=[4,5,5,6],r=[0,0,0,0]),i=Number.isInteger(i)||Array.isArray(i)?s(i):[6,8,12,12],e.createElement(m,z({},c,{columns:i,sx:z({columnGap:n,rowGap:r},a)}),o)},Z=["value","sx"],q=function(t){var n=t.value,r=t.sx,o=M(t,Z);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},r),"aria-label":"Toggle Menu"},o),!n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"52",y1:"29.9",x2:"16",y2:"29.9"}),e.createElement("line",{x1:"52",y1:"6.1",x2:"16",y2:"6.1"}),e.createElement("line",{x1:"52",y1:"18",x2:"16",y2:"18"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},J=function(e,t,n){return void 0===n&&(n=!1),{width:"auto",color:e===t?"secondary":"text",fontSize:[6,6,7,8],fontFamily:"heading",letterSpacing:"heading",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",borderTopWidth:n?"1px":"0px",py:[3,3,4,5],textDecoration:"none",display:"block",position:"relative",transition:"color 0.15s","@media (hover: hover) and (pointer: fine)":{"&:hover > #arrow":{opacity:1}},"&:hover":{color:e==t?"secondary":"text"}}},Q=[{url:"about",display:"About"},{url:"research",display:"Research"},{url:"blog",display:"Blog"},{url:"press",display:"Press"}],$=function(){return e.createElement(v,{id:"arrow",sx:{pointerEvents:"none",display:"inline-block",position:"absolute",left:["-60px","-68px","-80px","-104px"],top:["32px","32px","46px","62px"],opacity:0,transition:"opacity 0.2s ease-out",transform:"rotate(45deg)",width:[36,36,48,56],height:[36,36,48,56]}})},ee=function(t){var n=t.link,r=t.mode,o=t.nav,a=t.first,i=t.setExpanded,l=n.url,s=n.display,m="remote"===r?"https://carbonplan.org/"+l:"/"+l;return"homepage"===r||"local"===r&&o===l?e.createElement(b,{href:m,passHref:!0},e.createElement(c,{onClick:function(){o===l&&i(!1)},sx:J(o,l,a)},e.createElement($,null),s)):e.createElement(c,{href:m,sx:J(o,l,a)},e.createElement($,null),s)},te=function(t){var n=t.nav,r=t.mode,o=t.setExpanded;return t.links.map(function(t,a){return e.createElement(ee,{key:a,link:t,mode:r,nav:n,first:0===a,setExpanded:o})})},ne=function(t){var n=t.status,r=t.mode,a=t.nav,i=t.menuItems,m=o(!1),p=m[0],u=m[1];return e.createElement(K,{sx:{pt:["12px"],pb:[3]}},e.createElement(G,{start:[1],width:[2]},e.createElement(l,{sx:{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(X,{id:"logo",sx:{cursor:"pointer",color:"primary"}}))),(null==r||"remote"==r)&&e.createElement(c,{href:"https://carbonplan.org","aria-label":"CarbonPlan Homepage",sx:{display:"block"}},e.createElement(X,{sx:{cursor:"pointer",color:"primary"}})))),e.createElement(G,{start:[4,9],width:[2,2],dr:1,sx:{display:[n?"flex":"none","flex","flex","flex"],alignItems:"center"}},e.createElement(l,{sx:{fontSize:[1,2,3],position:"relative",top:["-2px","-3px","-3px"]}},n?"("+n+")":"")),e.createElement(G,{start:[n?6:4,6,11,11],width:[n?1:3,3,2,2],sx:{zIndex:5e3}},e.createElement(s,{sx:{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(q,{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(G,{start:[2,4,7,7],width:[5,4,5,5]},e.createElement(l,{as:"nav",sx:{display:p?"inherit":"none",mt:[5,5,5,6]}},e.createElement(te,{links:Q,nav:a,mode:r,setExpanded:u})))))))},re=function(t){var n=z({},t);return e.createElement(l,z({as:"svg",width:"80",stroke:"none",fill:"currentColor",viewBox:"0 0 32 32"},n),e.createElement("path",{d:"M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z"}),e.createElement("path",{d:"M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4"}),e.createElement("path",{d:"M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15"}))},oe=function(){return e.createElement(l,{sx:{mt:[7,7,7,8],mb:[7,7,7,8],pb:[2,1,0,0]}},e.createElement(K,{sx:{mb:[0,0,4,5]}},e.createElement(G,{start:[1,2],width:[3,3]},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"EMAIL"),e.createElement(c,{href:"mailto:hello@carbonplan.org",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"hello@carbonplan.org"))),e.createElement(G,{start:[5],width:[1],dl:1,dr:1,sx:{display:["flex","none","none","none"],justifyContent:["center"]}},e.createElement(re,{sx:{mt:["-4px"],width:"60px",height:"60px"}})),e.createElement(G,{start:[1,5,5,5],width:[3,3],sx:{mt:[3,0,0,0]}},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"FOLLOW"),e.createElement(c,{href:"https://twitter.com/carbonplanorg",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"@carbonplanorg"))),e.createElement(G,{start:[1,9],width:[5,4,3,3],sx:{mt:["42px","42px",0,0],mb:[3,3,0,0]}},e.createElement(l,null,e.createElement(l,{sx:{fontSize:[2,2,2,3],fontFamily:"body",color:"secondary"}},"CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))),e.createElement(K,{sx:{mb:["2px"],mt:[5,5,4]}},e.createElement(G,{start:[1,1,2,2],width:[3,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"]}},e.createElement(l,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",pt:[2]}},e.createElement(l,{sx:{color:"secondary",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono"}},"(c) 2021 CARBONPLAN"))),e.createElement(G,{start:[4,3,5,5],width:[2,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"],mt:[0,0,0,0]}},e.createElement(l,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",width:["100%","auto","auto","auto"],pt:[2]}},e.createElement(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(G,{start:[5,7,9,9],width:[2,3,3,3],sx:{display:["none","initial","initial","initial"]}},e.createElement(re,{sx:{width:80,height:80,mt:[0,"-10px",4,5],mb:["-12px"]}}))))},ae=["sx"],ie=function(t){var n=t.sx,r=M(t,ae),o=u(),a=o[0],l=o[1],c=i(function(){l("light"===a?"dark":"light")},[a]);return e.createElement(p,z({"aria-label":"Toggle dark mode",onClick:c,role:"checkbox",sx:z({width:32,height:32,display:"inline-block",cursor:"pointer",color:"secondary"},n)},r),e.createElement(w,{sx:{strokeWidth:"1.75",transition:"stroke 0.15s","@media (hover: hover) and (pointer: fine)":{"&:hover":{stroke:"primary"}}}}))},le=function(){var t=process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,n=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER,r=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG,o=x().theme.rawColors.secondary;if(t&&n&&r){var a=t.substring(0,7),i="https://github.com/"+n+"/"+r+"/tree/"+t;return e.createElement(l,{sx:{display:"inline-block",width:"87px"}},e.createElement(ce,{color:o}),e.createElement(c,{href:i,sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:o,fontSize:[1],textTransform:"uppercase",textDecoration:"none"}},a))}return e.createElement(l,{sx:{display:"inline-block",width:"87px"}},e.createElement(ce,{color:o}),e.createElement(h,{sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:o,fontSize:[1],textTransform:"uppercase"}},o))},ce=function(t){return e.createElement("svg",{fill:t.color,opacity:"0.8",viewBox:"0 0 24 24",width:"24",height:"24"},e.createElement("circle",{r:5,cx:19,cy:19}))},se=function(t){var n=t.mode,r=o(function(e){return"mouse"===e?"X,Y: "+pe(0,4)+","+pe(0,4):"scroll"===e?"SCROLL: 0."+pe((0).toFixed(0),2):e}(n)),i=r[0],l=r[1];return a(function(){if("mouse"===n){var e=function(e){var t=pe(e.clientX,4),n=pe(e.clientY,4);l("X,Y: "+t+","+n)};return window.addEventListener("mousemove",e),function(){window.removeEventListener("mousemove",e)}}if("scroll"===n){var t=function(e){var t=function(e,t){return Math.min(e.scrollY/(document.body.offsetHeight-770),.99)}(window);l("SCROLL: 0."+pe((100*t).toFixed(0),2))};return window.addEventListener("scroll",t),function(){window.removeEventListener("scroll",t)}}},[]),e.createElement(h,{sx:{whiteSpace:"nowrap",display:"inline-block",mr:"-6px",fontFamily:"mono",letterSpacing:"body",color:"secondary",fontSize:[1],textTransform:"uppercase"}},i)},me=function(t){return e.createElement(l,{sx:{userSelect:"none",position:"fixed",bottom:"42px",right:"24px",transformOrigin:"right",transform:"rotate(90deg)",display:["none","none","initial"]}},e.createElement(se,{mode:t.mode}),e.createElement(le,null))};function pe(e,t){return e.toString().padStart(t,"0")}var de=["duration","delay","children"],ue=S({from:{opacity:0},to:{opacity:1}}),xe=function(t){var n=t.duration,r=void 0===n?300:n,o=t.delay,a=void 0===o?0:o,i=t.children,c=M(t,de);return e.createElement(l,z({},c,{sx:{animationDuration:r+"ms",animationDelay:a+"ms",animationName:ue.toString(),animationFillMode:"backwards"}}),i)},he=function(e){var t=e.createElement("div");t.style.visibility="hidden",t.style.width="100px",e.body.appendChild(t),t.style.overflow="scroll";var n=e.createElement("div");n.style.width="100%",t.appendChild(n);var r=t.offsetWidth-n.offsetWidth;return t.parentNode.removeChild(t),r},fe=function(){return a(function(){"undefined"!=typeof document&&he(document)>0&&(document.body.classList.add("custom-scrollbar"),document.getElementsByTagName("html")[0].classList.add("custom-scrollbar"))},[]),null},ge=function(t){var n=t.color,r=void 0===n?"muted":n,i=o(!1),c=i[0],s=i[1];return a(function(){function e(e){";"===e.key&&e.metaKey&&s(function(e){return!e})}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[]),e.createElement(l,{sx:{position:"fixed",width:"100%",left:0,top:0,zIndex:"teal"===r?5e3:-1,pointerEvents:"none",display:c?"initial":"none"}},e.createElement(d,null,e.createElement(l,{sx:{display:["none","none","initial","initial"]}},e.createElement(Ee,{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(Ee,{indices:[1,2,3,4,5,6,7,8],color:r})),e.createElement(l,{sx:{display:["initial","none","none","none"]}},e.createElement(Ee,{indices:[1,2,3,4,5,6],color:r}))))},ye=["red","orange","yellow","green","teal","blue","purple","pink"];function Ee(t){var n=t.color,r={outerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"teal"===n?"0px":"1px",borderRightWidth:"teal"===n?"0px":"1px",opacity:"teal"==n?.4:1},innerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"0px",borderRightWidth:"0px",opacity:"teal"==n?.4:1}};return e.createElement(K,null,t.indices.map(function(t){return e.createElement(G,{key:t,start:[t],width:[1,1],dl:.5,dr:.5,sx:z({bg:"teal"===n?"teal":"transparent",height:"100vh"},r.innerGuideColumn)},e.createElement(l,{sx:z({mx:["12px",3,3,4],bg:"teal"===n?"background":"transparent",height:"100%",borderLeftColor:"rainbow"===n?ye[t%8]:"muted",borderRightColor:"rainbow"===n?ye[t%8]:"muted"},r.outerGuideColumn)}))}))}var be=["value","sx"],ve=function(t){var n=t.value,r=t.sx,o=M(t,be);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},r),"aria-label":"Toggle Menu"},o),!n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"24",y1:"2.1",x2:"24",y2:"6.1"}),e.createElement("line",{x1:"24",y1:"24.1",x2:"24",y2:"33.9"}),e.createElement("line",{x1:"44",y1:"2.1",x2:"44",y2:"12.1"}),e.createElement("line",{x1:"44",y1:"30.1",x2:"44",y2:"33.9"}),e.createElement("circle",{cx:"24",cy:"15.1",r:"5"}),e.createElement("circle",{cx:"44",cy:"21.1",r:"5"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),n&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},we=function(t){var n=t.title,r=t.description,o=t.card,i=t.status,c=t.nav,m=t.settings,p=t.footer,u=void 0===p||p,h=t.header,f=void 0===h||h,g=t.metadata,y=void 0===g?"mouse":g,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(xe,{duration:250},T)),W&&(T=e.createElement(l,{sx:{mb:[8,8,9,10]}},e.createElement(d,null,T)));var F=x().theme;a(function(){if(F){var e=window.matchMedia("(min-width: "+F.breakpoints[1]+")");return e.onchange=function(e){e.matches&&null!=m&&m.value&&null!=m&&m.onClick&&(null==m||m.onClick())},function(){e.onchange=null}}},[null==F?void 0:F.breakpoints,null==m?void 0:m.value,null==m?void 0:m.onClick]);var B=[e.createElement(ie,{key:"dimmer",sx:{color:"primary",mt:"-2px",display:["block","block","top"===w?"block":"none","top"===w?"block":"none"]}})];return m&&B.push(e.createElement(ve,z({key:"settings",sx:{mr:["2px"],display:["inherit","inherit","none","none"]}},m))),e.createElement(e.Fragment,null,C&&e.createElement(ge,{color:C}),M&&e.createElement(fe,null),e.createElement(Y,{card:o,description:r,title:n}),e.createElement(s,{sx:{flexDirection:"column",minHeight:"100vh"}},f&&e.createElement(l,{as:"header",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",position:"sticky",top:0,bg:"background",height:"56px",zIndex:2e3}},e.createElement(d,null,e.createElement(ne,{mode:b,status:i,nav:c,menuItems:B}))),e.createElement(l,{sx:{width:"100%",flex:"1 1 auto"}},T),u&&e.createElement(l,{as:"footer",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px"}},e.createElement(d,null,e.createElement(oe,null))),"bottom"===w&&e.createElement(l,{sx:{display:["none","none","initial","initial"],position:["fixed"],right:[13],bottom:[17,17,15,15]}},e.createElement(ie,null)),y&&e.createElement(me,{mode:y})))},ke=function(){return e.createElement(we,{footer:!1,title:"404 / carbonplan"},e.createElement(K,{sx:{mb:[5,0,0],pt:[0,0,6]}},e.createElement(G,{start:[1,1,3,3],width:[6,4,4,4]},e.createElement(f.h1,null,"Oops!"),e.createElement(l,{sx:{fontSize:[4,4,4,5],lineHeight:"h3",mt:[3,4,4],mb:[2,3,3],maxWidth:["90%","90%","400px"]}},"Sorry but we can't seem to find the page you are looking for."),e.createElement(l,{sx:{color:"secondary",fontFamily:"mono",letterSpacing:"mono",fontSize:[2,2,2,3],mt:[4,5,5]}},"ERROR CODE 404")),e.createElement(G,{start:[2,5,7,7],width:[4,4,4,4]},e.createElement(l,{sx:{width:["100%"],mt:[2,4,4,5],fill:"primary"}},e.createElement(k,{sx:{width:"100%",height:"auto"}})))))},Ce=function(t){var n=t.value;return e.createElement(p,{onClick:t.onClick,id:t.id,role:"checkbox","aria-checked":n,"aria-label":"Expand",sx:z({display:"inline-block",width:24,height:24,p:[1],cursor:"pointer",fill:"secondary",stroke:"secondary","@media (hover: hover) and (pointer: fine)":{"&:hover":{fill:"primary",stroke:"primary"}}},t.sx)},e.createElement("svg",{viewBox:"0 0 16 16"},e.createElement("path",{d:"M8,0 V16 M0,8 H16",style:{strokeWidth:2,transition:"0.25s all",transformOrigin:"8px 8px",transform:n?"rotate(45deg)":""}})))},Se=["label","value","sx","children"],ze=function(t){var n=t.label,r=t.value,o=t.sx,a=t.children,i=M(t,Se),c=o&&o.color?o.color:"primary",s=i&&(i.onClick||i.onDoubleClick);return e.createElement(l,z({as:s?"button":"span",role:"checkbox","aria-checked":r,"aria-label":n,sx:z({display:"inline-block",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono",cursor:s?"pointer":"inherit",color:c,backgroundColor:"transparent",borderStyle:"solid",borderColor:c,lineHeight:"body",borderWidth:"0px",borderBottomWidth:"1px",textTransform:"uppercase",userSelect:"none",transition:"opacity 0.05s",pt:["1px"],pb:["2px"],px:[0],m:[0],opacity:null==r||r?1:"primary"==c?.24:.33},o)},i),a)},Me=["values","setValues","label","colors","showAll","multiSelect"],Ae={label:{fontFamily:"mono",letterSpacing:"mono",fontSize:[1,1,1,2],color:"secondary",userSelect:"none",textTransform:"uppercase"}},Le=function(e,t,n){return void 0===n&&(n={}),Object.keys(e).reduce(function(e,r){var o;return Object.assign(e,((o={})[r]=n[r]||t,o))},{})},We=function(e){return Object.keys(e).filter(function(t){return e[t]}).length==Object.keys(e).length},Te=function(e){var t,n=e.values,r=e.multiSelect,o=e.setValues,a=e.value,i=We(n),l="all"===a;if(r)if(l&&!i)t=Le(n,!0);else if(l&&i)t=Le(n,!1);else{var c;t=z({},n,((c={})[a]=!n[a],c))}else if(l&&!i)t=Le(n,!0);else if(l&&i);else{var s;t=Le(n,!1,((s={})[a]=!0,s))}t&&o(t)},Fe=function(t){var n=t.values,r=t.setValues,o=t.label,a=t.colors,i=t.showAll,c=void 0!==i&&i,s=t.multiSelect,m=void 0!==s&&s,p=M(t,Me);return e.createElement(l,p,o&&e.createElement(l,{sx:Ae.label},o),e.createElement(l,{sx:{mt:o?[3]:0}},c&&e.createElement(ze,{onClick:function(){return Te({values:n,multiSelect:m,setValues:r,value:"all"})},value:We(n),sx:{mr:[2]}},"All"),Object.keys(n).map(function(t,o){return e.createElement(ze,{onClick:function(){return Te({values:n,multiSelect:m,setValues:r,value:t})},onDoubleClick:function(){return Te({values:n,multiSelect:!1,setValues:r,value:t})},key:o,value:n[t],sx:{width:"max-content",color:a?a[t]:"primary",mr:[2],mb:[1]}},t)})))},Be={xs:[1],sm:[3],md:[5],lg:[7],xl:[9]},Ie=function(t){var n,r=t.children,o=t.direction,a=void 0===o?"vertical":o,i=t.spacing,c=void 0===i?"md":i;if("string"==typeof c?n=Be[c]:"number"==typeof c?n=[c]:Array.isArray(c)&&c.every(function(e){return"number"==typeof e})&&(n=c),!n)throw new Error("Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl");if(!["horizontal","vertical"].includes(a))throw new Error("Invalid direction value. Must be either horizontal or vertical");var s="vertical"===a?"mt":"ml",m="horizontal"===a?{display:"inline-block"}:{};return e.createElement(l,null,e.Children.map(r,function(t,r){var o;return e.createElement(l,{sx:z((o={},o[s]=r>0?n:0,o),m)},t)}))},De=function(t){var n,r=t.children,o=t.variant,a=void 0===o?"h1":o;return"h1"===a&&(n=[4,"27px","42px","54px"]),"h2"===a&&(n=[4,4,"14px","54px"]),e.createElement(e.Fragment,null,e.createElement(G,{start:[1,4,8,8],width:[1,1,1,1]},e.createElement(l,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],textAlign:"right"}},"/")),e.createElement(G,{start:[2,5,9,9],width:[3,3,2,2]},e.createElement(l,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],height:["100%","0px","0px","0px"]}},r)))},Oe=function(t){var n=t.children,r=t.sidenote,o=t.description,a=t.descriptionStart,i=void 0===a?[1,3,5,5]:a,c=t.descriptionWidth,s=void 0===c?[5,5,5,4]:c,m=t.sx,p=i.map(function(e){return e-1});return p[0]=6,e.createElement(K,{sx:{mt:[5,6,7,8],mb:[5,6,7,8]}},e.createElement(G,{start:[1,1,2,2],width:p},e.createElement(l,{as:"h1",variant:"styles.h1",sx:z({my:[0,0,0,0]},m)},n)),r&&e.createElement(De,null,r),o&&e.createElement(G,{start:i,width:s},e.createElement(l,{sx:{mt:[4,"5px","20px","31px"],fontSize:[2,2,2,3]}},o)))},Re=["size","inverted","sx"],He=t(function(t,n){var r,o=t.size,a=void 0===o?"sm":o,i=t.inverted,l=t.sx,c=M(t,Re),s=z(((r={color:i?"secondary":"primary",borderColor:"secondary",borderStyle:"solid",borderWidth:"0px",borderBottomWidth:"1px",borderRadius:"0px",transition:"border 0.15s"}).borderBottomWidth="1px",r.width="calc(min(15ch, 100%))",r.p=[0],r.py=["2px"],r["input::-webkit-outer-spin-button"]={WebkitAppearance:"none",margin:0},r["input::-webkit-inner-spin-button"]={WebkitAppearance:"none",margin:0},r[":focus"]={borderColor:"primary"},r[":focus-visible"]={outline:"none !important",background:"none !important"},r),F(a),l);return e.createElement(g,z({},c,{ref:n,sx:s}))}),_e=["children","size","sx","sxSelect"],je=function(t){var n,o,a,i,c,s,m,p=t.children,d=t.size,u=void 0===d?"sm":d,x=t.sx,h=t.sxSelect,f=M(t,_e),g=x&&x.color?x.color:"primary",y=F(u),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"}}))},Ve=["sx"],Ne=t(function(t,n){var r=t.sx,o=M(t,Ve),a=r&&r.color?r.color:"primary",i=x().theme.rawColors;return e.createElement(y,z({ref:n,sx:z({"&::-webkit-slider-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:"0 0 0 0px "+i.secondary,transition:"box-shadow .15s ease"},"&::-moz-range-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:"0 0 0 0px "+i.secondary,transition:"box-shadow .15s ease"},":focus-visible":{outline:"none !important",background:i.secondary+" !important"},":focus":{color:a,"&::-webkit-slider-thumb":{boxShadow:"0 0 0 4px "+i.secondary},"&::-moz-range-thumb":{boxShadow:"0 0 0 4px "+i.secondary}},color:a},r)},o))}),Pe={reset:{verticalAlign:"baseline",border:0,outline:0,margin:0,padding:0},row:{borderStyle:"solid",borderWidth:"0px",borderTopWidth:"1px",borderColor:"muted",pt:[3,3,3,"20px"],pb:[3,3,3,"20px"],mb:["2px"]},header:{display:"block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]},index:{display:"block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]},entry:{display:"block",fontSize:[2,2,2,3],fontFamily:"faux",letterSpacing:"faux",mb:["1px"],mt:[2,0,0,0]}},Ge=function(t){var n=t.data,r=t.sx,o=t.color,a=t.header,i=t.columns,c=t.start,s=t.width,m=t.index,p=void 0===m||m,d=t.borderBottom,u=void 0===d||d,x=t.borderTop,h=void 0===x||x;if(!c||!i||!s)throw new Error("Must provide columns, start, and width");return e.createElement(l,{as:"table",sx:z({display:"block"},r)},e.createElement(l,{as:"tbody",sx:{display:"block"}},a&&e.createElement(K,{as:"tr",sx:z({},Pe.reset,Pe.header,Pe.row,{color:o,borderTopWidth:h?"1px":"0px"})},e.createElement(G,{as:"td",start:[1],width:i,sx:Pe.index},a)),n.map(function(t,r){return e.createElement(K,{as:"tr",columns:i,key:r,sx:z({},Pe.reset,Pe.row,{pb:u&&r===n.length-1?["18px","18px","18px","22px"]:[3,3,3,"20px"],borderBottomWidth:u&&r===n.length-1?"1px":"0px",borderTopWidth:h||0!==r||a?"1px":"0px"})},t.map(function(t,n){return e.createElement(G,{as:"td",key:n,start:c[n],width:s[n],sx:z({},Pe.reset,0==n&&p?Pe.index:Pe.entry)},t)}))})))},Ye=["value","onClick","disabled","sx"],Xe=t(function(t,n){var r=t.value,o=t.onClick,a=t.disabled,i=t.sx,c=M(t,Ye),s=i&&i.color?i.color:"primary";return e.createElement(l,z({ref:n,as:"button",onClick:o,role:"checkbox","aria-checked":r=!a&&r,"aria-label":"Toggle",sx:z({border:"none",background:"none",cursor:a?"default":"pointer",p:[0],m:[0],display:"inline-block"},i)},c),e.createElement(l,{sx:{width:"50px",height:"20px",borderRadius:"20px",backgroundColor:r?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"}})))}),Ue=function(t){var n=t.id;return n?e.createElement(e.Fragment,null,e.createElement("script",{async:!0,src:"https://www.googletagmanager.com/gtag/js?id="+n}),e.createElement("script",{dangerouslySetInnerHTML:{__html:"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', '"+n+"', {\n page_path: window.location.pathname,\n });\n "}})):null},Ke=function(t){var n=t.expanded,r=t.sx,o=t.children;return e.createElement(e.Fragment,null,e.createElement(l,{sx:{position:"fixed",top:"56px",bottom:"0px",left:"0px",width:"calc(100vw)",mt:["56px"],bg:"background",zIndex:1e3,transition:"opacity 0.15s",opacity:n?.9:0,pointerEvents:n?"all":"none"}}),e.createElement(l,{sx:z({position:"fixed",width:"calc(100vw)",top:"0px",mt:["56px"],pb:[6,7,7,8],pt:[5,6,7,8],bg:"background",zIndex:1100,borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",transition:"transform 0.15s",ml:[-3,-4,-5,-6],pl:[3,4,5,6],pr:[3,4,5,6],transform:n?"translateY(0)":"translateY(-100%)"},r)},e.createElement(K,null,e.createElement(G,{start:[1,1,1,1],width:[6,8,10,10]},o))))},Ze={month:"short",day:"numeric",year:"numeric"},qe=function(e,t,n){var r;if(!n)return null;var o="string"==typeof n?n:Ze[t],a=e.toLocaleString("default",((r={})[t]=o,r));return"numeric"===o&&["day","month"].includes(t)?a.padStart(2,"0"):a},Je=function(e,t){var n;void 0===t&&(t=Ze);var r=new Date(e.replace(/-/g,"/"));return[qe(r,"month",t.month),qe(r,"day",t.day),qe(r,"year",t.year)].filter(Boolean).join(null!=(n=t.separator)?n:" ")};export{L as Badge,I as Button,O as Callout,N as Colorbar,G as Column,ke as Custom404,ie as Dimmer,Ce as Expander,xe as FadeIn,Fe as Filter,oe as Footer,Ie as Group,ge as Guide,ne as Header,Oe as Heading,He as Input,we as Layout,T as Link,X as Logo,q as Menu,Y as Meta,re as Monogram,K as Row,fe as Scrollbar,je as Select,ve as Settings,De as Sidenote,Ne as Slider,Ge as Table,ze as Tag,Xe as Toggle,Ue as Tracking,Ke as Tray,Je as formatDate,he as getScrollbarWidth};
2926
2
  //# sourceMappingURL=index.esm.js.map