UNPKG

151 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@styled-system/should-forward-prop'), require('styled-components'), require('@styled-system/css'), require('styled-system'), require('use-events'), require('prismjs'), require('prism-react-renderer'), require('@reach/auto-id'), require('color'), require('@styled-system/theme-get'), require('prop-types'), require('use-onclickoutside'), require('@popperjs/core'), require('react-dom'), require('@reach/alert'), require('@reach/rect'), require('react-transition-group/Transition'), require('flushable')) :
3 typeof define === 'function' && define.amd ? define(['exports', 'react', '@styled-system/should-forward-prop', 'styled-components', '@styled-system/css', 'styled-system', 'use-events', 'prismjs', 'prism-react-renderer', '@reach/auto-id', 'color', '@styled-system/theme-get', 'prop-types', 'use-onclickoutside', '@popperjs/core', 'react-dom', '@reach/alert', '@reach/rect', 'react-transition-group/Transition', 'flushable'], factory) :
4 (global = global || self, factory(global['@blockstack/ui'] = {}, global.React, global.shouldForwardProp, global.styled, global.css, global.styledSystem, global.useEvents, global.Prism, global.Highlight, global.autoId, global.Color, global.themeGet, global.propTypes, global.useOnClickOutside, global.core, global.reactDom, global.ReachAlert, global.rect, global.CSSTransition, global.flushable));
5}(this, (function (exports, React, shouldForwardProp, styled, css, styledSystem, useEvents, Prism, Highlight, autoId, Color, themeGet, propTypes, useOnClickOutside, core, reactDom, ReachAlert, rect, CSSTransition, flushable) { 'use strict';
6
7 var React__default = 'default' in React ? React['default'] : React;
8 var styled__default = 'default' in styled ? styled['default'] : styled;
9 css = css && Object.prototype.hasOwnProperty.call(css, 'default') ? css['default'] : css;
10 Prism = Prism && Object.prototype.hasOwnProperty.call(Prism, 'default') ? Prism['default'] : Prism;
11 Highlight = Highlight && Object.prototype.hasOwnProperty.call(Highlight, 'default') ? Highlight['default'] : Highlight;
12 Color = Color && Object.prototype.hasOwnProperty.call(Color, 'default') ? Color['default'] : Color;
13 useOnClickOutside = useOnClickOutside && Object.prototype.hasOwnProperty.call(useOnClickOutside, 'default') ? useOnClickOutside['default'] : useOnClickOutside;
14 ReachAlert = ReachAlert && Object.prototype.hasOwnProperty.call(ReachAlert, 'default') ? ReachAlert['default'] : ReachAlert;
15 CSSTransition = CSSTransition && Object.prototype.hasOwnProperty.call(CSSTransition, 'default') ? CSSTransition['default'] : CSSTransition;
16 flushable = flushable && Object.prototype.hasOwnProperty.call(flushable, 'default') ? flushable['default'] : flushable;
17
18 function _defineProperty(obj, key, value) {
19 if (key in obj) {
20 Object.defineProperty(obj, key, {
21 value: value,
22 enumerable: true,
23 configurable: true,
24 writable: true
25 });
26 } else {
27 obj[key] = value;
28 }
29
30 return obj;
31 }
32
33 function ownKeys(object, enumerableOnly) {
34 var keys = Object.keys(object);
35
36 if (Object.getOwnPropertySymbols) {
37 var symbols = Object.getOwnPropertySymbols(object);
38 if (enumerableOnly) symbols = symbols.filter(function (sym) {
39 return Object.getOwnPropertyDescriptor(object, sym).enumerable;
40 });
41 keys.push.apply(keys, symbols);
42 }
43
44 return keys;
45 }
46
47 function _objectSpread2(target) {
48 for (var i = 1; i < arguments.length; i++) {
49 var source = arguments[i] != null ? arguments[i] : {};
50
51 if (i % 2) {
52 ownKeys(Object(source), true).forEach(function (key) {
53 _defineProperty(target, key, source[key]);
54 });
55 } else if (Object.getOwnPropertyDescriptors) {
56 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
57 } else {
58 ownKeys(Object(source)).forEach(function (key) {
59 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
60 });
61 }
62 }
63
64 return target;
65 }
66
67 function _objectWithoutPropertiesLoose(source, excluded) {
68 if (source == null) return {};
69 var target = {};
70 var sourceKeys = Object.keys(source);
71 var key, i;
72
73 for (i = 0; i < sourceKeys.length; i++) {
74 key = sourceKeys[i];
75 if (excluded.indexOf(key) >= 0) continue;
76 target[key] = source[key];
77 }
78
79 return target;
80 }
81
82 function _taggedTemplateLiteralLoose(strings, raw) {
83 if (!raw) {
84 raw = strings.slice(0);
85 }
86
87 strings.raw = raw;
88 return strings;
89 }
90
91 function _unsupportedIterableToArray(o, minLen) {
92 if (!o) return;
93 if (typeof o === "string") return _arrayLikeToArray(o, minLen);
94 var n = Object.prototype.toString.call(o).slice(8, -1);
95 if (n === "Object" && o.constructor) n = o.constructor.name;
96 if (n === "Map" || n === "Set") return Array.from(o);
97 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
98 }
99
100 function _arrayLikeToArray(arr, len) {
101 if (len == null || len > arr.length) len = arr.length;
102
103 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
104
105 return arr2;
106 }
107
108 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
109 var it;
110
111 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
112 if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
113 if (it) o = it;
114 var i = 0;
115 return function () {
116 if (i >= o.length) return {
117 done: true
118 };
119 return {
120 done: false,
121 value: o[i++]
122 };
123 };
124 }
125
126 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
127 }
128
129 it = o[Symbol.iterator]();
130 return it.next.bind(it);
131 }
132
133 var config = {
134 roundedTop: {
135 properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
136 scale: 'radii'
137 },
138 roundedBottom: {
139 properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
140 scale: 'radii'
141 },
142 roundedLeft: {
143 properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
144 scale: 'radii'
145 },
146 roundedRight: {
147 properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
148 scale: 'radii'
149 },
150 roundedTopRight: {
151 property: 'borderTopRightRadius',
152 scale: 'radii'
153 },
154 roundedTopLeft: {
155 property: 'borderTopLeftRadius',
156 scale: 'radii'
157 },
158 roundedBottomRight: {
159 property: 'borderBottomRightRadius',
160 scale: 'radii'
161 },
162 roundedBottomLeft: {
163 property: 'borderBottomLeftRadius',
164 scale: 'radii'
165 },
166 rounded: {
167 property: 'borderRadius',
168 scale: 'radii'
169 },
170 d: {
171 property: 'display'
172 },
173 w: {
174 property: 'width',
175 scale: 'sizes'
176 },
177 minW: {
178 property: 'minWidth',
179 scale: 'sizes'
180 },
181 maxW: {
182 property: 'maxWidth',
183 scale: 'sizes'
184 },
185 h: {
186 property: 'height',
187 scale: 'sizes'
188 },
189 minH: {
190 property: 'minHeight',
191 scale: 'sizes'
192 },
193 maxH: {
194 property: 'maxHeight',
195 scale: 'sizes'
196 },
197 bgImg: {
198 property: 'backgroundImage'
199 },
200 bgSize: {
201 property: 'backgroundSize'
202 },
203 bgPos: {
204 property: 'backgroundPosition'
205 },
206 bgRepeat: {
207 property: 'backgroundRepeat'
208 },
209 pos: {
210 property: 'position'
211 },
212 flexDir: {
213 property: 'flexDirection'
214 },
215 shadow: {
216 property: 'boxShadow',
217 scale: 'shadows'
218 },
219 textDecoration: true,
220 overflowX: true,
221 overflowY: true,
222 textTransform: true,
223 animation: true,
224 appearance: true,
225 transform: true,
226 transformOrigin: true,
227 visibility: true,
228 whiteSpace: true,
229 userSelect: true,
230 pointerEvents: true,
231 wordBreak: true,
232 overflowWrap: true,
233 textOverflow: true,
234 boxSizing: true,
235 cursor: true,
236 resize: true,
237 transition: true,
238 listStyleType: true,
239 listStylePosition: true,
240 listStyleImage: true,
241 fill: {
242 property: 'fill',
243 scale: 'colors'
244 },
245 stroke: {
246 property: 'stroke',
247 scale: 'colors'
248 },
249 objectFit: true,
250 objectPosition: true,
251 backgroundAttachment: true,
252 outline: true
253 };
254 config.bgAttachment = config.backgroundAttachment;
255 config.textDecor = config.textDecoration;
256 config.listStylePos = config.listStylePosition;
257 config.listStyleImg = config.listStyleImage;
258 var extraConfig = /*#__PURE__*/styledSystem.system(config);
259
260 var transformAlias = function transformAlias(prop, propValue) {
261 var configKeys = Object.keys(config);
262 var result = {};
263
264 if (configKeys.includes(prop)) {
265 var _config$prop = config[prop],
266 properties = _config$prop.properties,
267 property = _config$prop.property;
268
269 if (properties) {
270 properties.forEach(function (_cssProp) {
271 return result[_cssProp] = propValue;
272 });
273 }
274
275 if (property) {
276 result[property] = propValue;
277 }
278
279 if (config[prop] === true) {
280 result[prop] = propValue;
281 }
282 } else {
283 result[prop] = propValue;
284 }
285
286 return result;
287 };
288
289 var transformAliasProps = function transformAliasProps(props) {
290 var result = {};
291
292 for (var prop in props) {
293 if (typeof props[prop] === 'object' && !Array.isArray(props[prop])) {
294 var _objectSpread2$1;
295
296 result = _objectSpread2({}, result, (_objectSpread2$1 = {}, _objectSpread2$1[prop] = transformAliasProps(props[prop]), _objectSpread2$1));
297 } else {
298 result = _objectSpread2({}, result, {}, transformAlias(prop, props[prop]));
299 }
300 }
301
302 return result;
303 };
304 var extraProps = /*#__PURE__*/Object.keys(config);
305
306 function _templateObject() {
307 var data = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n"]);
308
309 _templateObject = function _templateObject() {
310 return data;
311 };
312
313 return data;
314 }
315 var systemProps = /*#__PURE__*/styledSystem.compose(styledSystem.layout, styledSystem.color, styledSystem.space, styledSystem.background, styledSystem.border, styledSystem.grid, styledSystem.position, styledSystem.shadow, styledSystem.typography, styledSystem.flexbox, styledSystem.textStyle, styledSystem.buttonStyle, styledSystem.colorStyle);
316
317 var _shouldForwardProp = /*#__PURE__*/shouldForwardProp.createShouldForwardProp( /*#__PURE__*/[].concat(shouldForwardProp.props, extraProps));
318
319 var StyledBox = /*#__PURE__*/styled__default('div').withConfig({
320 shouldForwardProp: function shouldForwardProp(prop) {
321 return _shouldForwardProp(prop);
322 }
323 })( /*#__PURE__*/_templateObject(), systemProps, extraConfig);
324 var hover = '&:hover';
325 var active = '&:active, &[data-active=true]';
326 var focus = '&:focus';
327 var visited = '&:visited';
328 var even = '&:nth-of-type(even)';
329 var odd = '&:nth-of-type(odd)';
330 var disabled = '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover';
331 var checked = '&[aria-checked=true]';
332 var mixed = '&[aria-checked=mixed]';
333 var selected = '&[aria-selected=true]';
334 var invalid = '&[aria-invalid=true]';
335 var pressed = '&[aria-pressed=true]';
336 var readOnly = '&[aria-readonly=true], &[readonly]';
337 var first = '&:first-of-type';
338 var last = '&:last-of-type';
339 var expanded = '&[aria-expanded=true]';
340 var grabbed = '&[aria-grabbed=true]';
341 var notFirst = '&:not(:first-of-type)';
342 var notLast = '&:not(:last-of-type)';
343 var groupHover = '[role=group]:hover &';
344 var BoxWithPseudoStyles = /*#__PURE__*/styled__default(StyledBox)(function (_ref) {
345 var _css;
346
347 var _after = _ref._after,
348 _focus = _ref._focus,
349 _selected = _ref._selected,
350 _focusWithin = _ref._focusWithin,
351 _hover = _ref._hover,
352 _invalid = _ref._invalid,
353 _active = _ref._active,
354 _disabled = _ref._disabled,
355 _grabbed = _ref._grabbed,
356 _pressed = _ref._pressed,
357 _expanded = _ref._expanded,
358 _visited = _ref._visited,
359 _before = _ref._before,
360 _readOnly = _ref._readOnly,
361 _first = _ref._first,
362 _notFirst = _ref._notFirst,
363 _notLast = _ref._notLast,
364 _last = _ref._last,
365 _placeholder = _ref._placeholder,
366 _checked = _ref._checked,
367 _groupHover = _ref._groupHover,
368 _mixed = _ref._mixed,
369 _odd = _ref._odd,
370 _even = _ref._even;
371 return css((_css = {}, _css[hover] = transformAliasProps(_hover), _css[focus] = transformAliasProps(_focus), _css[active] = transformAliasProps(_active), _css[visited] = transformAliasProps(_visited), _css[disabled] = transformAliasProps(_disabled), _css[selected] = transformAliasProps(_selected), _css[invalid] = transformAliasProps(_invalid), _css[expanded] = transformAliasProps(_expanded), _css[grabbed] = transformAliasProps(_grabbed), _css[readOnly] = transformAliasProps(_readOnly), _css[first] = transformAliasProps(_first), _css[notFirst] = transformAliasProps(_notFirst), _css[notLast] = transformAliasProps(_notLast), _css[last] = transformAliasProps(_last), _css[odd] = transformAliasProps(_odd), _css[even] = transformAliasProps(_even), _css[mixed] = transformAliasProps(_mixed), _css[checked] = transformAliasProps(_checked), _css[pressed] = transformAliasProps(_pressed), _css[groupHover] = transformAliasProps(_groupHover), _css['&:before'] = transformAliasProps(_before), _css['&:after'] = transformAliasProps(_after), _css['&:focus-within'] = transformAliasProps(_focusWithin), _css['&::placeholder'] = transformAliasProps(_placeholder), _css));
372 });
373 var Box = /*#__PURE__*/React.forwardRef(function (props, ref) {
374 return React__default.createElement(BoxWithPseudoStyles, Object.assign({
375 ref: ref
376 }, props));
377 });
378 Box.displayName = 'Box';
379
380 var ButtonGroup = function ButtonGroup(_ref) {
381 var size = _ref.size,
382 variantColor = _ref.variantColor,
383 variant = _ref.variant,
384 isAttached = _ref.isAttached,
385 _ref$spacing = _ref.spacing,
386 spacing = _ref$spacing === void 0 ? 2 : _ref$spacing,
387 children = _ref.children,
388 rest = _objectWithoutPropertiesLoose(_ref, ["size", "variantColor", "variant", "isAttached", "spacing", "children"]);
389
390 var clones = React.Children.map(children, function (child, index) {
391 var isFirst = index === 0;
392 var isLast = index === React.Children.count(children) - 1;
393
394 if (!React__default.isValidElement(child)) {
395 return null;
396 }
397
398 return React.cloneElement(child, _objectSpread2({
399 size: size || child.props.size,
400 variantColor: child.props.variantColor || variantColor,
401 variant: child.props.variant || variant,
402 _focus: {
403 boxShadow: 'outline',
404 zIndex: 1
405 }
406 }, !isLast && !isAttached && {
407 mr: spacing
408 }, {}, isFirst && isAttached && {
409 roundedRight: 0
410 }, {}, isLast && isAttached && {
411 roundedLeft: 0
412 }, {}, !isFirst && !isLast && isAttached && {
413 rounded: 0
414 }));
415 });
416 return React__default.createElement(Box, Object.assign({
417 display: "inline-block"
418 }, rest), clones);
419 };
420
421 ButtonGroup.displayName = 'ButtonGroup';
422
423 var colors = {
424 transparent: 'transparent',
425 current: 'currentColor',
426 black: '#000000',
427 white: '#ffffff',
428 blue: /*#__PURE__*/Object.assign('#3700ff', {
429 100: '#F2F2FF',
430 200: '#E3E5FF',
431 300: '#C5CCFF',
432 400: '#AAB3FF',
433 900: '#5548ff',
434 hover: '#3100DC'
435 }),
436 ink: /*#__PURE__*/Object.assign('#0f1117', {
437 50: '#f4f4f5',
438 100: '#F9F9FC',
439 150: '#F4F4F5',
440 200: '#E7E7E8',
441 250: '#C8C8CC',
442 300: '#C8C8CC',
443 400: '#A7A7AD',
444 600: '#677282',
445 900: '#222933'
446 }),
447 darken: {
448 50: 'rgba(15, 17, 23, 0.05)',
449 100: 'rgba(15, 17, 23, 0.1)',
450 150: 'rgba(15, 17, 23, 0.15)'
451 },
452 red: '#de0014',
453 green: '#00a73e',
454 orange: '#f7aa00',
455 cyan: '#00d4ff',
456 feedback: {}
457 };
458 colors.feedback = {
459 error: colors.red,
460 success: colors.green,
461 warning: colors.orange,
462 info: colors.cyan
463 };
464
465 var containers = {
466 'screen-sm': '640px',
467 'screen-md': '768px',
468 'screen-lg': '1024px',
469 'screen-xl': '1280px'
470 };
471 var baseSizes = {
472 '0': '0px',
473 px: '1px',
474 '1': '4px',
475 '2': '8px',
476 '3': '12px',
477 '4': '16px',
478 '5': '20px',
479 '6': '24px',
480 '8': '32px',
481 '10': '40px',
482 '12': '48px',
483 '16': '64px',
484 '20': '80px',
485 '24': '96px',
486 '32': '128px',
487 '40': '160px',
488 '48': '192px',
489 '56': '224px',
490 '64': '256px'
491 };
492 var namedSpacingUnits = {
493 none: baseSizes[0],
494 'extra-tight': baseSizes[1],
495 tight: baseSizes[2],
496 'base-tight': baseSizes[3],
497 base: baseSizes[4],
498 'base-loose': baseSizes[5],
499 loose: baseSizes[6],
500 'extra-loose': baseSizes[8]
501 };
502 var space = function space(spacing) {
503 return spacing;
504 };
505 var sizes = /*#__PURE__*/_objectSpread2({}, baseSizes, {
506 containers: containers
507 }, namedSpacingUnits);
508
509 var typography = {
510 letterSpacings: {
511 tighter: '-0.02em',
512 tight: '-0.01em',
513 normal: '0',
514 wide: '0.025em',
515 wider: '0.05em',
516 widest: '0.1em'
517 },
518 lineHeights: {
519 normal: 'normal',
520 none: '1',
521 shorter: '1.333',
522 "short": '1.4',
523 base: '1.5',
524 tall: '1.625',
525 taller: '2'
526 },
527 fontWeights: {
528 hairline: 100,
529 thin: 200,
530 light: 300,
531 normal: 400,
532 medium: 500,
533 semibold: 600,
534 bold: 700,
535 extrabold: 800,
536 black: 900
537 },
538 fonts: {
539 heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
540 body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
541 mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
542 },
543 fontSizes: [12, 14, 16, 20, 24, 28, 32, 36, 48, 64, 96, 128]
544 };
545 var displayLarge = {
546 fontWeight: typography.fontWeights.semibold,
547 fontSize: typography.fontSizes[4],
548 lineHeight: typography.lineHeights.shorter,
549 letterSpacing: '-0.02em'
550 };
551 var displaySmall = {
552 fontWeight: typography.fontWeights.medium,
553 fontSize: typography.fontSizes[3],
554 lineHeight: typography.lineHeights["short"],
555 letterSpacing: '-0.02em'
556 };
557 var bodyLarge = {
558 fontWeight: typography.fontWeights.normal,
559 fontSize: typography.fontSizes[2],
560 lineHeight: typography.lineHeights.base,
561 letterSpacing: '-0.01em'
562 };
563
564 var bodyLargeMedium = /*#__PURE__*/_objectSpread2({}, bodyLarge, {
565 fontWeight: typography.fontWeights.medium
566 });
567
568 var bodySmall = {
569 fontWeight: typography.fontWeights.normal,
570 fontSize: typography.fontSizes[1],
571 lineHeight: typography.lineHeights["short"],
572 letterSpacing: '-0.01em'
573 };
574
575 var bodySmallMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
576 fontWeight: typography.fontWeights.medium
577 });
578
579 var caption = {
580 fontSize: typography.fontSizes[0],
581 lineHeight: typography.lineHeights.shorter,
582 letterSpacing: '0.00em'
583 };
584
585 var captionMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
586 fontWeight: typography.fontWeights.medium
587 });
588
589 var textStyles = {
590 display: {
591 large: displayLarge,
592 small: displaySmall
593 },
594 body: {
595 large: /*#__PURE__*/_objectSpread2({}, bodyLarge, {
596 medium: bodyLargeMedium
597 }),
598 small: /*#__PURE__*/_objectSpread2({}, bodySmall, {
599 medium: bodySmallMedium
600 })
601 },
602 caption: /*#__PURE__*/_objectSpread2({}, caption, {
603 medium: captionMedium
604 })
605 };
606 var typography$1 = /*#__PURE__*/_objectSpread2({}, typography, {
607 textStyles: textStyles
608 });
609
610 var space$1 = sizes;
611 var shadows = {
612 low: '0px 1px 2px rgba(0, 0, 0, 0.04)',
613 mid: '0px 1px 2px rgba(27, 39, 51, 0.04), 0px 4px 8px rgba(27, 39, 51, 0.04)',
614 high: '0px 8px 16px rgba(27, 39, 51, 0.08)',
615 inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
616 none: 'none',
617 focus: '0 0 0 3px rgba(170, 179, 255, 0.75)',
618 'button.secondary': '0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.08)'
619 };
620 var breakpoints = ['30em', '48em', '62em', '80em'];
621 breakpoints.sm = breakpoints[0];
622 breakpoints.md = breakpoints[1];
623 breakpoints.lg = breakpoints[2];
624 breakpoints.xl = breakpoints[3];
625 var zIndices = {
626 hide: -1,
627 auto: 'auto',
628 '0': 0,
629 '10': 10,
630 '20': 20,
631 '30': 30,
632 '40': 40,
633 '50': 50,
634 '60': 60,
635 '70': 70,
636 '80': 80
637 };
638 var radii = {
639 none: '0',
640 sm: '0.125rem',
641 md: '0.25rem',
642 lg: '0.5rem',
643 full: '9999px'
644 };
645 var opacity = {
646 '0': '0',
647 '20%': '0.2',
648 '40%': '0.4',
649 '60%': '0.6',
650 '80%': '0.8',
651 '100%': '1'
652 };
653 var borders = {
654 none: 0,
655 '1px': '1px solid',
656 '2px': '2px solid',
657 '4px': '4px solid'
658 };
659
660 var theme = /*#__PURE__*/_objectSpread2({
661 breakpoints: breakpoints,
662 zIndices: zIndices,
663 radii: radii,
664 opacity: opacity,
665 borders: borders,
666 colors: colors
667 }, typography$1, {
668 sizes: sizes,
669 shadows: shadows,
670 space: space$1
671 });
672
673 var transition = 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)';
674
675 var baseProps = {
676 display: 'inline-flex',
677 appearance: 'none',
678 alignItems: 'center',
679 justifyContent: 'center',
680 transition: 'all 250ms',
681 userSelect: 'none',
682 position: 'relative',
683 whiteSpace: 'nowrap',
684 verticalAlign: 'middle',
685 lineHeight: 'shorter',
686 outline: 'none',
687 border: '1px solid',
688 borderColor: 'transparent'
689 };
690 var sizes$1 = {
691 lg: {
692 minHeight: 12,
693 minWidth: 9 * 14,
694 fontSize: '14px !important',
695 px: 5
696 },
697 md: {
698 minHeight: 10,
699 minWidth: 10,
700 fontSize: '14px !important',
701 px: 4
702 },
703 sm: {
704 minHeight: 6,
705 minWidth: 10,
706 fontSize: '11px !important',
707 px: 3
708 }
709 };
710 var unstyledStyle = {
711 userSelect: 'inherit',
712 bg: 'none',
713 border: 0,
714 color: 'inherit',
715 display: 'inline',
716 font: 'inherit',
717 lineHeight: 'inherit',
718 m: 0,
719 p: 0,
720 textAlign: 'inherit'
721 };
722
723 var linkVariantProps = function linkVariantProps() {
724 return {
725 p: 0,
726 height: 'unset',
727 lineHeight: 'normal',
728 color: 'blue',
729 minWidth: 'unset',
730 _hover: {
731 color: 'blue.hover',
732 textDecoration: 'underline'
733 },
734 _active: {
735 textDecoration: 'underline'
736 },
737 _focus: {
738 textDecoration: 'underline'
739 },
740 _disabled: {
741 color: '#A7A7AD'
742 }
743 };
744 };
745
746 var solidVariantProps = function solidVariantProps(_ref) {
747 var mode = _ref.mode,
748 customStyles = _ref.customStyles;
749 var style = {
750 primary: {
751 bg: 'blue',
752 color: 'white',
753 _hover: {
754 cursor: 'pointer'
755 },
756 _focus: {
757 borderColor: 'blue.300',
758 boxShadow: shadows.focus
759 },
760 _disabled: {
761 bg: 'blue.200',
762 cursor: 'not-allowed'
763 }
764 },
765 secondary: {
766 bg: 'blue.100',
767 color: 'blue',
768 border: '1px solid',
769 borderColor: 'blue.300',
770 boxShadow: null,
771 _hover: {
772 cursor: 'pointer',
773 bg: 'blue.200'
774 },
775 _focus: {
776 borderColor: 'blue.300',
777 boxShadow: shadows.focus
778 },
779 _disabled: {
780 bg: 'blue.200',
781 cursor: 'not-allowed',
782 color: 'white',
783 border: 'none'
784 }
785 },
786 tertiary: {
787 bg: 'white',
788 color: 'blue',
789 boxShadow: shadows['button.secondary'],
790 _hover: {
791 cursor: 'pointer',
792 bg: 'white',
793 boxShadow: shadows['button.secondary']
794 },
795 _focus: {
796 borderColor: 'blue.300',
797 boxShadow: shadows.focus
798 },
799 _disabled: {
800 bg: 'white',
801 pointerEvents: 'none',
802 cursor: 'not-allowed',
803 color: 'blue.300'
804 }
805 }
806 };
807
808 if (customStyles) {
809 return customStyles[mode];
810 }
811
812 return style[mode];
813 };
814
815 var sizeProps = function sizeProps(_ref2) {
816 var size = _ref2.size;
817 return sizes$1[size];
818 };
819
820 var variantProps = function variantProps(props) {
821 switch (props.variant) {
822 case 'solid':
823 return solidVariantProps(props);
824
825 case 'link':
826 return linkVariantProps();
827
828 case 'unstyled':
829 return unstyledStyle;
830
831 default:
832 return {};
833 }
834 };
835
836 var useButtonStyle = function useButtonStyle(props) {
837 return _objectSpread2({}, baseProps, {}, variantProps(props), {}, sizeProps(props));
838 };
839
840 function _templateObject$1() {
841 var data = _taggedTemplateLiteralLoose(["\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0px;\n overflow: hidden;\n white-space: nowrap;\n position: absolute;\n"]);
842
843 _templateObject$1 = function _templateObject() {
844 return data;
845 };
846
847 return data;
848 }
849 var VisuallyHidden = /*#__PURE__*/styled__default(Box)( /*#__PURE__*/_templateObject$1());
850
851 function _templateObject$2() {
852 var data = _taggedTemplateLiteralLoose(["\n animation: ", " ", " linear infinite;\n"]);
853
854 _templateObject$2 = function _templateObject() {
855 return data;
856 };
857
858 return data;
859 }
860 var spin = /*#__PURE__*/styled.keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
861 var StyledBox$1 = /*#__PURE__*/styled__default(Box)( /*#__PURE__*/_templateObject$2(), spin, function (props) {
862 return props.speed;
863 });
864
865 var getSize = function getSize(size) {
866 switch (size) {
867 case 'xs':
868 return '0.75rem';
869
870 case 'sm':
871 return '1rem';
872
873 case 'md':
874 return '1.5rem';
875
876 case 'lg':
877 return '2rem';
878
879 case 'xl':
880 return '3rem';
881
882 default:
883 return size;
884 }
885 };
886
887 var Spinner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
888 var _ref$size = _ref.size,
889 size = _ref$size === void 0 ? 'md' : _ref$size,
890 _ref$label = _ref.label,
891 label = _ref$label === void 0 ? 'Loading...' : _ref$label,
892 _ref$thickness = _ref.thickness,
893 thickness = _ref$thickness === void 0 ? '2px' : _ref$thickness,
894 _ref$speed = _ref.speed,
895 speed = _ref$speed === void 0 ? '0.85s' : _ref$speed,
896 color = _ref.color,
897 _ref$emptyColor = _ref.emptyColor,
898 emptyColor = _ref$emptyColor === void 0 ? 'transparent' : _ref$emptyColor,
899 props = _objectWithoutPropertiesLoose(_ref, ["size", "label", "thickness", "speed", "color", "emptyColor"]);
900
901 var _size = getSize(size);
902
903 return React__default.createElement(StyledBox$1, Object.assign({
904 ref: ref,
905 display: "inline-block",
906 borderWidth: thickness,
907 borderColor: "currentColor",
908 borderBottomColor: emptyColor,
909 borderLeftColor: emptyColor,
910 borderRadius: "100%",
911 speed: speed,
912 color: color,
913 size: _size
914 }, props), label && React__default.createElement(VisuallyHidden, null, label));
915 });
916 Spinner.displayName = 'Spinner';
917
918 var HoverChange = function HoverChange(_ref) {
919 var isHovered = _ref.isHovered,
920 isDisabled = _ref.isDisabled;
921 return React__default.createElement(Box, {
922 borderRadius: "6px",
923 position: "absolute",
924 width: "100%",
925 height: "100%",
926 left: 0,
927 top: 0,
928 bg: "darken.150",
929 opacity: !isDisabled && isHovered ? 1 : 0,
930 zIndex: 1,
931 transition: "all 250ms"
932 });
933 };
934
935 var Button = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
936 var isDisabled = _ref2.isDisabled,
937 isActive = _ref2.isActive,
938 children = _ref2.children,
939 Comp = _ref2.as,
940 _ref2$mode = _ref2.mode,
941 mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
942 _ref2$variant = _ref2.variant,
943 variant = _ref2$variant === void 0 ? 'solid' : _ref2$variant,
944 type = _ref2.type,
945 _ref2$size = _ref2.size,
946 size = _ref2$size === void 0 ? 'md' : _ref2$size,
947 isLoading = _ref2.isLoading,
948 loadingText = _ref2.loadingText,
949 customStyles = _ref2.customStyles,
950 rest = _objectWithoutPropertiesLoose(_ref2, ["isDisabled", "isActive", "children", "as", "mode", "variant", "type", "size", "isLoading", "loadingText", "customStyles"]);
951
952 var styles = useButtonStyle({
953 variant: variant,
954 mode: mode,
955 size: size,
956 customStyles: customStyles
957 });
958
959 var _useHover = useEvents.useHover(),
960 hovered = _useHover[0],
961 bind = _useHover[1];
962
963 return React__default.createElement(Box, Object.assign({
964 disabled: isDisabled,
965 "aria-disabled": isDisabled,
966 ref: ref,
967 type: type,
968 borderRadius: "6px",
969 fontWeight: "medium",
970 position: "relative",
971 "data-active": isActive ? 'true' : undefined,
972 as: Comp || 'button'
973 }, rest, styles, bind), React__default.createElement(Box, {
974 as: "span",
975 display: "flex",
976 alignItems: "center",
977 justifyContent: "center",
978 position: "relative",
979 zIndex: 5
980 }, isLoading && React__default.createElement(Spinner, {
981 position: loadingText ? 'relative' : 'absolute',
982 mx: !loadingText ? 'auto' : 'unset',
983 color: "currentColor",
984 size: size === 'sm' ? 'xs' : 'sm'
985 }), isLoading ? React__default.createElement(Box, {
986 ml: "tight"
987 }, loadingText) || React__default.createElement(Box, {
988 ml: "tight",
989 as: "span",
990 opacity: 0
991 }, children) : children), mode === 'primary' ? React__default.createElement(HoverChange, {
992 isDisabled: isDisabled || false,
993 isHovered: hovered
994 }) : null);
995 });
996 Button.displayName = 'Button';
997
998 var Flex = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
999 var align = _ref.align,
1000 justify = _ref.justify,
1001 wrap = _ref.wrap,
1002 direction = _ref.direction,
1003 rest = _objectWithoutPropertiesLoose(_ref, ["align", "justify", "wrap", "direction"]);
1004
1005 return React__default.createElement(Box, Object.assign({
1006 ref: ref,
1007 display: "flex",
1008 flexDirection: direction,
1009 alignItems: align,
1010 justifyContent: justify,
1011 flexWrap: wrap
1012 }, rest));
1013 });
1014 Flex.displayName = 'Flex';
1015
1016 var _window = undefined;
1017
1018 try {
1019 _window = window;
1020 } catch (e) {}
1021
1022 function getWindow(node) {
1023 var _node$ownerDocument$d, _node$ownerDocument;
1024
1025 return (_node$ownerDocument$d = node === null || node === void 0 ? void 0 : (_node$ownerDocument = node.ownerDocument) === null || _node$ownerDocument === void 0 ? void 0 : _node$ownerDocument.defaultView) !== null && _node$ownerDocument$d !== void 0 ? _node$ownerDocument$d : _window;
1026 }
1027
1028 function checkIsBrowser() {
1029 var _window = getWindow();
1030
1031 return Boolean(typeof _window !== 'undefined' && _window.document && _window.document.createElement);
1032 }
1033
1034 var isBrowser = /*#__PURE__*/checkIsBrowser();
1035 function isFunction(value) {
1036 return typeof value === 'function';
1037 }
1038 function createContext(options) {
1039 if (options === void 0) {
1040 options = {};
1041 }
1042
1043 var _options = options,
1044 _options$strict = _options.strict,
1045 strict = _options$strict === void 0 ? true : _options$strict,
1046 _options$errorMessage = _options.errorMessage,
1047 errorMessage = _options$errorMessage === void 0 ? 'useContext must be inside a Provider with a value' : _options$errorMessage,
1048 name = _options.name;
1049 var Context = React__default.createContext(undefined);
1050 Context.displayName = name;
1051
1052 function useContext() {
1053 var context = React__default.useContext(Context);
1054 if (!context && strict) throw new Error(errorMessage);
1055 return context;
1056 }
1057
1058 return [Context.Provider, useContext, Context];
1059 }
1060 function assignRef(ref, value) {
1061 if (ref == null) return;
1062
1063 if (isFunction(ref)) {
1064 ref(value);
1065 return;
1066 }
1067
1068 try {
1069 ref.current = value;
1070 } catch (error) {
1071 throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
1072 }
1073 }
1074 function mergeRefs() {
1075 for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
1076 refs[_key] = arguments[_key];
1077 }
1078
1079 return function (value) {
1080 refs.forEach(function (ref) {
1081 return assignRef(ref, value);
1082 });
1083 };
1084 }
1085 var __DEV__ = "development" !== 'production';
1086 function runIfFn(valueOrFn) {
1087 for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
1088 args[_key2 - 1] = arguments[_key2];
1089 }
1090
1091 return isFunction(valueOrFn) ? valueOrFn.apply(void 0, args) : valueOrFn;
1092 }
1093 function warn(options) {
1094 if (options.condition && __DEV__) {
1095 console.warn(options.message);
1096 }
1097 }
1098 function callAllHandlers() {
1099 for (var _len3 = arguments.length, fns = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
1100 fns[_key3] = arguments[_key3];
1101 }
1102
1103 return function (event) {
1104 fns.some(function (fn) {
1105 fn && fn(event);
1106 return event && event.defaultPrevented;
1107 });
1108 };
1109 }
1110 function isString(value) {
1111 return Object.prototype.toString.call(value) === '[object String]';
1112 }
1113 function omit(object, keys) {
1114 var result = {};
1115
1116 for (var key in object) {
1117 if (keys.includes(key)) continue;
1118 result[key] = object[key];
1119 }
1120
1121 return result;
1122 }
1123 function pick(object, keys) {
1124 var result = {};
1125
1126 for (var _iterator = _createForOfIteratorHelperLoose(keys), _step; !(_step = _iterator()).done;) {
1127 var key = _step.value;
1128
1129 if (key in object) {
1130 result[key] = object[key];
1131 }
1132 }
1133
1134 return result;
1135 }
1136 var startPad = function startPad(n, z, s) {
1137 if (z === void 0) {
1138 z = 2;
1139 }
1140
1141 if (s === void 0) {
1142 s = '0';
1143 }
1144
1145 return (n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + '';
1146 };
1147
1148 function useControllableProp(propValue, stateValue) {
1149 var _React$useRef = React.useRef(propValue !== undefined),
1150 isControlled = _React$useRef.current;
1151
1152 var value = isControlled && typeof propValue !== 'undefined' ? propValue : stateValue;
1153 return [isControlled, value];
1154 }
1155 var defaultPropsMap = {
1156 value: 'value',
1157 defaultValue: 'defaultValue',
1158 onChange: 'onChange'
1159 };
1160 function useControllableState(props) {
1161 var valueProp = props.value,
1162 defaultValue = props.defaultValue,
1163 onChange = props.onChange,
1164 _props$shouldUpdate = props.shouldUpdate,
1165 shouldUpdate = _props$shouldUpdate === void 0 ? function () {
1166 return true;
1167 } : _props$shouldUpdate,
1168 _props$name = props.name,
1169 name = _props$name === void 0 ? 'Component' : _props$name,
1170 _props$propsMap = props.propsMap,
1171 propsMap = _props$propsMap === void 0 ? defaultPropsMap : _props$propsMap;
1172
1173 var _React$useState = React.useState(defaultValue),
1174 valueState = _React$useState[0],
1175 setValue = _React$useState[1];
1176
1177 var _React$useRef2 = React.useRef(valueProp !== undefined),
1178 isControlled = _React$useRef2.current;
1179
1180 React.useEffect(function () {
1181 var nextIsControlled = valueProp !== undefined;
1182 var nextMode = nextIsControlled ? 'a controlled' : 'an uncontrolled';
1183 var mode = isControlled ? 'a controlled' : 'an uncontrolled';
1184 warn({
1185 condition: isControlled !== nextIsControlled,
1186 message: "Warning: " + name + " is changing from " + mode + " to " + nextMode + " component. " + 'Components should not switch from controlled to uncontrolled (or vice versa). ' + ("Use the '" + propsMap['value'] + "' with an '" + propsMap['onChange'] + "' handler. ") + ("If you want an uncontrolled component, remove the " + propsMap['value'] + " prop and use '" + propsMap['defaultValue'] + "' instead. \"") + 'More info: https://fb.me/react-controlled-components'
1187 });
1188 }, [valueProp, isControlled, name]);
1189
1190 var _React$useRef3 = React.useRef(defaultValue),
1191 _defaultValue = _React$useRef3.current;
1192
1193 React.useEffect(function () {
1194 warn({
1195 condition: _defaultValue !== defaultValue,
1196 message: "Warning: A component is changing the default value of an uncontrolled " + name + " after being initialized. " + ("To suppress this warning opt to use a controlled " + name + ".")
1197 });
1198 }, [JSON.stringify(defaultValue)]);
1199 var value = isControlled ? valueProp : valueState;
1200 var updateValue = React.useCallback(function (next) {
1201 var nextValue = runIfFn(next, value);
1202 var shouldUpdateState = shouldUpdate(value, nextValue);
1203 if (!shouldUpdateState) return;
1204
1205 if (!isControlled) {
1206 setValue(next);
1207 }
1208
1209 onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
1210 }, [onChange, shouldUpdate, isControlled, value]);
1211 return [value, updateValue];
1212 }
1213
1214 function usePrevious(value) {
1215 var valueRef = React.useRef();
1216 React.useEffect(function () {
1217 valueRef.current = value;
1218 }, [value]);
1219 return valueRef.current;
1220 }
1221
1222 function useDisclosure(props) {
1223 if (props === void 0) {
1224 props = {};
1225 }
1226
1227 var _props = props,
1228 onCloseProp = _props.onClose,
1229 onOpenProp = _props.onOpen;
1230
1231 var _React$useState = React.useState(props.defaultIsOpen || false),
1232 isOpenState = _React$useState[0],
1233 setIsOpen = _React$useState[1];
1234
1235 var _useControllableProp = useControllableProp(props.isOpen, isOpenState),
1236 isControlled = _useControllableProp[0],
1237 isOpen = _useControllableProp[1];
1238
1239 var prevIsOpen = usePrevious(isOpen);
1240 var onClose = React.useCallback(function () {
1241 if (!isControlled) {
1242 setIsOpen(false);
1243 }
1244
1245 if (onCloseProp) {
1246 onCloseProp();
1247 }
1248 }, [isControlled, onCloseProp]);
1249 var onOpen = React.useCallback(function () {
1250 if (!isControlled) {
1251 setIsOpen(true);
1252 }
1253
1254 if (onOpenProp) {
1255 onOpenProp();
1256 }
1257 }, [isControlled, onOpenProp]);
1258 var onToggle = React.useCallback(function () {
1259 var action = isOpen ? onClose : onOpen;
1260 action();
1261 }, [isOpen, onOpen, onClose]);
1262 return {
1263 isOpen: Boolean(isOpen),
1264 prevIsOpen: Boolean(prevIsOpen),
1265 onOpen: onOpen,
1266 onClose: onClose,
1267 onToggle: onToggle,
1268 isControlled: isControlled
1269 };
1270 }
1271
1272 function useLatestRef(value) {
1273 var ref = React.useRef(value);
1274 React.useEffect(function () {
1275 ref.current = value;
1276 }, [value]);
1277 return ref;
1278 }
1279
1280 function useEventListener(event, handler, doc, options) {
1281 if (doc === void 0) {
1282 doc = isBrowser ? document : null;
1283 }
1284
1285 var savedHandler = useLatestRef(handler);
1286 React.useEffect(function () {
1287 if (!doc) return;
1288
1289 var listener = function listener(event) {
1290 savedHandler.current(event);
1291 };
1292
1293 doc.addEventListener(event, listener, options);
1294 return function () {
1295 doc.removeEventListener(event, listener, options);
1296 };
1297 }, [event, doc, options, savedHandler]);
1298 return function () {
1299 var _doc;
1300
1301 (_doc = doc) === null || _doc === void 0 ? void 0 : _doc.removeEventListener(event, savedHandler.current, options);
1302 };
1303 }
1304
1305 function useForceUpdate() {
1306 var _React$useState = React.useState(0),
1307 count = _React$useState[0],
1308 setCount = _React$useState[1];
1309
1310 return React.useCallback(function () {
1311 return setCount(count + 1);
1312 }, [count]);
1313 }
1314
1315 function generatePrefix(prefix, id) {
1316 return prefix + "-" + id;
1317 }
1318
1319 function useId(idProp, prefix) {
1320 var uuid = autoId.useId();
1321 var id = idProp !== null && idProp !== void 0 ? idProp : uuid;
1322 return prefix ? generatePrefix(prefix, id) : id;
1323 }
1324 function useIds(idProp) {
1325 var id = useId(idProp);
1326
1327 for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1328 prefixes[_key - 1] = arguments[_key];
1329 }
1330
1331 return prefixes.map(function (prefix) {
1332 return generatePrefix(prefix, id);
1333 });
1334 }
1335
1336 function assignRef$1(ref, value) {
1337 if (ref == null) return;
1338
1339 if (typeof ref === 'function') {
1340 ref(value);
1341 } else {
1342 try {
1343 ref.current = value;
1344 } catch (error) {
1345 throw new Error("Cannot assign value \"" + value + "\" to ref \"" + ref + "\"");
1346 }
1347 }
1348 }
1349 function useMergeRefs() {
1350 for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
1351 refs[_key] = arguments[_key];
1352 }
1353
1354 return React.useMemo(function () {
1355 if (refs.every(function (ref) {
1356 return ref == null;
1357 })) {
1358 return null;
1359 }
1360
1361 return function (node) {
1362 refs.forEach(function (ref) {
1363 if (ref) assignRef$1(ref, node);
1364 });
1365 };
1366 }, refs);
1367 }
1368
1369 var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
1370
1371 var useTimeout = function useTimeout(_ref) {
1372 var onTimeout = _ref.onTimeout,
1373 duration = _ref.duration;
1374
1375 var _useState = React.useState(true),
1376 activated = _useState[0],
1377 setActivated = _useState[1];
1378
1379 var timeoutRef = React.useRef();
1380 var stopTimeout = React.useCallback(function () {
1381 window.clearTimeout(timeoutRef.current);
1382 setActivated(false);
1383 }, []);
1384 React.useEffect(function () {
1385 if (activated) {
1386 timeoutRef.current = window.setTimeout(function () {
1387 onTimeout();
1388 }, duration);
1389 return function () {
1390 stopTimeout();
1391 };
1392 }
1393
1394 return;
1395 }, [onTimeout, activated, duration, stopTimeout]);
1396 var startTimeout = React.useCallback(function () {
1397 setActivated(true);
1398 }, []);
1399 return {
1400 stopTimeout: stopTimeout,
1401 startTimeout: startTimeout
1402 };
1403 };
1404
1405 var get = function get(color, hue) {
1406 return color + "." + hue;
1407 };
1408 var addOpacity = function addOpacity(color, opacity) {
1409 return Color(color).fade(1 - opacity).rgb().string();
1410 };
1411 var addWhite = function addWhite(color, opacity) {
1412 return Color(color).mix(Color('#fff'), opacity).hex();
1413 };
1414 var addBlack = function addBlack(color, opacity) {
1415 return Color(color).mix(Color('#000'), opacity).hex();
1416 };
1417 var isDarkColor = function isDarkColor(color) {
1418 return Color(color).isDark();
1419 };
1420 var generateAlphaColors = function generateAlphaColors(color) {
1421 return {
1422 900: addOpacity(color, 0.92),
1423 800: addOpacity(color, 0.8),
1424 700: addOpacity(color, 0.6),
1425 600: addOpacity(color, 0.48),
1426 500: addOpacity(color, 0.38),
1427 400: addOpacity(color, 0.24),
1428 300: addOpacity(color, 0.16),
1429 200: addOpacity(color, 0.12),
1430 100: addOpacity(color, 0.08),
1431 50: addOpacity(color, 0.04)
1432 };
1433 };
1434 var colorEmphasis = function colorEmphasis(color, emphasis) {
1435 switch (emphasis) {
1436 case 'high':
1437 return color;
1438
1439 case 'medium':
1440 return generateAlphaColors(color)[700];
1441
1442 case 'low':
1443 return generateAlphaColors(color)[500];
1444
1445 case 'lowest':
1446 return generateAlphaColors(color)[300];
1447
1448 default:
1449 return undefined;
1450 }
1451 };
1452 var generateStripe = function generateStripe(_ref) {
1453 var _ref$size = _ref.size,
1454 size = _ref$size === void 0 ? '1rem' : _ref$size,
1455 _ref$color = _ref.color,
1456 color = _ref$color === void 0 ? 'rgba(255, 255, 255, 0.15)' : _ref$color;
1457 return styled.css(["background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 50%,", " 50%,", " 75%,transparent 75%,transparent );background-size:", " ", ";"], color, color, color, size, size);
1458 };
1459
1460 var ThemeContext = /*#__PURE__*/React__default.createContext(theme);
1461
1462 var ThemeProvider = function ThemeProvider(_ref) {
1463 var _ref$theme = _ref.theme,
1464 theme$1 = _ref$theme === void 0 ? theme : _ref$theme,
1465 children = _ref.children;
1466 return React__default.createElement(styled.ThemeProvider, {
1467 theme: theme$1
1468 }, children);
1469 };
1470
1471 var useTheme = function useTheme() {
1472 var theme = React.useContext(ThemeContext);
1473
1474 if (theme === undefined) {
1475 throw new Error('useTheme must be used within a ThemeProvider');
1476 }
1477
1478 return theme;
1479 };
1480
1481 var isBrowser$1 = typeof window !== 'undefined';
1482
1483 var isSupported = function isSupported(api) {
1484 return isBrowser$1 && api in window;
1485 };
1486
1487 function useMediaQuery(query) {
1488 var _React$useState = React.useState(function () {
1489 if (!isSupported('matchMedia')) return false;
1490 return window.matchMedia(query).matches;
1491 }),
1492 matches = _React$useState[0],
1493 setMatches = _React$useState[1];
1494
1495 useSafeLayoutEffect(function () {
1496 if (!isSupported('matchMedia')) return;
1497 var mediaQueryList = window.matchMedia(query);
1498
1499 var listener = function listener() {
1500 return setMatches(mediaQueryList.matches);
1501 };
1502
1503 mediaQueryList.addListener(listener);
1504 listener();
1505 return function () {
1506 mediaQueryList.removeListener(listener);
1507 };
1508 }, [query]);
1509 return [matches, setMatches];
1510 }
1511
1512 (function (Color) {
1513 Color["Accent"] = "accent";
1514 Color["Bg"] = "bg";
1515 Color["BgAlt"] = "bg-alt";
1516 Color["BgLight"] = "bg-light";
1517 Color["Invert"] = "invert";
1518 Color["TextHover"] = "text-hover";
1519 Color["TextTitle"] = "text-title";
1520 Color["TextCaption"] = "text-caption";
1521 Color["TextBody"] = "text-body";
1522 Color["InputPlaceholder"] = "input-placeholder";
1523 Color["Border"] = "border";
1524 Color["FeedbackAlert"] = "feedback-alert";
1525 Color["FeedbackError"] = "feedback-error";
1526 Color["FeedbackSuccess"] = "feedback-success";
1527 })(exports.Color || (exports.Color = {}));
1528
1529 var colorGet = function colorGet(path, fallback) {
1530 return themeGet.themeGet('colors.' + path, fallback);
1531 };
1532
1533 var colors$1 = function colors(props) {
1534 var _light, _dark;
1535
1536 return {
1537 light: (_light = {}, _light[exports.Color.Accent] = colorGet('blue')(props), _light[exports.Color.Bg] = 'white', _light[exports.Color.BgAlt] = colorGet('ink.50')(props), _light[exports.Color.BgLight] = 'white', _light[exports.Color.Invert] = colorGet('ink')(props), _light[exports.Color.TextHover] = colorGet('blue')(props), _light[exports.Color.TextTitle] = colorGet('ink')(props), _light[exports.Color.TextCaption] = colorGet('ink.600')(props), _light[exports.Color.TextBody] = colorGet('ink.900')(props), _light[exports.Color.InputPlaceholder] = colorGet('ink.400')(props), _light[exports.Color.Border] = 'rgb(229, 229, 236)', _light[exports.Color.FeedbackAlert] = colorGet('orange')(props), _light[exports.Color.FeedbackError] = colorGet('red')(props), _light[exports.Color.FeedbackSuccess] = colorGet('green')(props), _light),
1538 dark: (_dark = {}, _dark[exports.Color.Accent] = colorGet('blue.400')(props), _dark[exports.Color.Bg] = colorGet('ink')(props), _dark[exports.Color.BgAlt] = 'rgba(255,255,255,0.05)', _dark[exports.Color.BgLight] = 'rgba(255,255,255,0.08)', _dark[exports.Color.Invert] = 'white', _dark[exports.Color.TextHover] = colorGet('blue.300')(props), _dark[exports.Color.TextTitle] = 'white', _dark[exports.Color.TextCaption] = '#a7a7ad', _dark[exports.Color.TextBody] = colorGet('ink.300')(props), _dark[exports.Color.InputPlaceholder] = 'rgba(255,255,255,0.3)', _dark[exports.Color.Border] = 'rgb(39, 41, 46)', _dark[exports.Color.FeedbackAlert] = colorGet('orange')(props), _dark[exports.Color.FeedbackError] = colorGet('red')(props), _dark[exports.Color.FeedbackSuccess] = colorGet('green')(props), _dark)
1539 };
1540 };
1541
1542 var colorModeStyles = function colorModeStyles(props) {
1543 return colors$1(props)[props.colorMode];
1544 };
1545
1546 var colorMap = function colorMap(props) {
1547 return Object.keys(colors$1(props)[props.colorMode]);
1548 };
1549
1550 var color = function color(name) {
1551 return "var(--colors-" + name + ")";
1552 };
1553 var themeColor = function themeColor(name) {
1554 return name;
1555 };
1556 var generateCssVariables = function generateCssVariables(mode) {
1557 return function (_ref) {
1558 var _ref$colorMode = _ref.colorMode,
1559 colorMode = _ref$colorMode === void 0 ? mode : _ref$colorMode,
1560 rest = _objectWithoutPropertiesLoose(_ref, ["colorMode"]);
1561
1562 return colorMap(_objectSpread2({
1563 colorMode: colorMode
1564 }, rest)).map(function (key) {
1565 return "--colors-" + key + ": " + colorModeStyles(_objectSpread2({
1566 colorMode: colorMode
1567 }, rest))[key] + ";";
1568 });
1569 };
1570 };
1571
1572 function _templateObject$3() {
1573 var data = _taggedTemplateLiteralLoose(["\n :root{\n ", ";\n }\n\n @media (prefers-color-scheme: dark) {\n :root {\n ", ";\n }\n }\n\n @media (prefers-color-scheme: light) {\n :root {\n ", ";\n }\n }\n\n html, body, #__next {\n background: var(--colors-bg);\n border-color: var(--colors-border);\n }\n\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n textarea:-webkit-autofill,\n textarea:-webkit-autofill:hover,\n textarea:-webkit-autofill:focus,\n select:-webkit-autofill,\n select:-webkit-autofill:hover,\n select:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--colors-text-body);\n font-size: 16px !important;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n input:-ms-input-placeholder,\n textarea:-ms-input-placeholder {\n color: var(--colors-input-placeholder) !important;\n }\n\n input::-ms-input-placeholder,\n textarea::-ms-input-placeholder {\n color: var(--colors-input-placeholder) !important;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: var(--colors-input-placeholder) !important;\n }\n "]);
1574
1575 _templateObject$3 = function _templateObject() {
1576 return data;
1577 };
1578
1579 return data;
1580 }
1581 var ColorModes = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject$3(), /*#__PURE__*/generateCssVariables('light'), /*#__PURE__*/generateCssVariables('dark'), /*#__PURE__*/generateCssVariables('light'));
1582
1583 var ColorModeContext = /*#__PURE__*/React__default.createContext({
1584 colorMode: undefined
1585 });
1586 var ColorModeProvider = function ColorModeProvider(_ref) {
1587 var colorMode = _ref.colorMode,
1588 children = _ref.children,
1589 onChange = _ref.onChange;
1590
1591 var _React$useState = React__default.useState(colorMode),
1592 mode = _React$useState[0],
1593 setMode = _React$useState[1];
1594
1595 var _useMediaQuery = useMediaQuery('(prefers-color-scheme: dark)'),
1596 darkmode = _useMediaQuery[0];
1597
1598 var _useMediaQuery2 = useMediaQuery('(prefers-color-scheme: light)'),
1599 lightmode = _useMediaQuery2[0];
1600
1601 React.useEffect(function () {
1602 if (!mode) {
1603 setMode(darkmode ? 'dark' : 'light');
1604 }
1605 }, [mode, darkmode, lightmode]);
1606 var setColorMode = React.useCallback(function (mode) {
1607 setMode(mode);
1608 onChange && onChange(mode);
1609 }, [mode]);
1610 var toggleColorMode = React.useCallback(function () {
1611 if (mode === 'light') {
1612 setColorMode('dark');
1613 return;
1614 }
1615
1616 if (mode === 'dark') {
1617 setColorMode('light');
1618 return;
1619 }
1620
1621 if (!colorMode && darkmode) {
1622 setColorMode('light');
1623 return;
1624 }
1625
1626 if (!mode && lightmode) {
1627 setColorMode('dark');
1628 return;
1629 }
1630 }, [mode, lightmode, darkmode]);
1631 return React__default.createElement(ColorModeContext.Provider, {
1632 value: {
1633 colorMode: mode,
1634 toggleColorMode: toggleColorMode
1635 }
1636 }, React__default.createElement(ColorModes, {
1637 colorMode: mode
1638 }), children);
1639 };
1640
1641 var useColorMode = function useColorMode() {
1642 var _useContext = React.useContext(ColorModeContext),
1643 colorMode = _useContext.colorMode,
1644 toggleColorMode = _useContext.toggleColorMode;
1645
1646 return {
1647 colorMode: colorMode,
1648 toggleColorMode: toggleColorMode
1649 };
1650 };
1651
1652 var theme$1 = {
1653 plain: {
1654 color: '#fff',
1655 backgroundColor: 'transparent'
1656 },
1657 styles: [{
1658 types: ['prolog'],
1659 style: {
1660 color: 'rgb(0, 0, 128)'
1661 }
1662 }, {
1663 types: ['comment', 'punctuation'],
1664 style: {
1665 color: 'rgb(106, 153, 85)'
1666 }
1667 }, {
1668 types: ['builtin', 'tag', 'changed', 'function', 'keyword'],
1669 style: {
1670 color: 'rgb(86, 156, 214)'
1671 }
1672 }, {
1673 types: ['number', 'variable', 'inserted'],
1674 style: {
1675 color: '#A58FFF'
1676 }
1677 }, {
1678 types: ['operator'],
1679 style: {
1680 color: 'rgb(212, 212, 212)'
1681 }
1682 }, {
1683 types: ['constant'],
1684 style: {
1685 color: 'rgb(100, 102, 149)'
1686 }
1687 }, {
1688 types: ['attr-name'],
1689 style: {
1690 color: 'rgb(156, 220, 254)'
1691 }
1692 }, {
1693 types: ['car'],
1694 style: {
1695 color: 'rgb(156, 220, 254)'
1696 }
1697 }, {
1698 types: ['deleted', 'string'],
1699 style: {
1700 color: '#FF7B48'
1701 }
1702 }, {
1703 types: ['class-name'],
1704 style: {
1705 color: 'rgb(78, 201, 176)'
1706 }
1707 }, {
1708 types: ['char'],
1709 style: {
1710 color: '#FF7B48'
1711 }
1712 }]
1713 };
1714
1715 (function (Prism) {
1716
1717 function primitive(pattern) {
1718 return RegExp('([\\s([])' + pattern + '(?=[\\s)])');
1719 }
1720
1721 var par = '(\\()';
1722 var space = '(?=\\s)';
1723 var language = {
1724 heading: {
1725 pattern: /;;;.*/,
1726 alias: ['comment', 'title']
1727 },
1728 comment: /;;.*/,
1729 string: [{
1730 pattern: /"(?:[^"\\]|\\.)*"/,
1731 greedy: true
1732 }, {
1733 pattern: /0x[0-9a-fA-F]*/,
1734 greedy: true
1735 }],
1736 symbol: {
1737 pattern: /'[^()#'\s]+/,
1738 greedy: true
1739 },
1740 keyword: [{
1741 pattern: /*#__PURE__*/RegExp(par + '(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\
1742map-get\\?|var-get|contract-map-get\\?|get|tuple|\
1743define-public|define-private|define-constant|define-map|define-data-var|\
1744define-fungible-token|define-non-fungible-token|\
1745define-read-only)' + space),
1746 lookbehind: true
1747 }, {
1748 pattern: /*#__PURE__*/RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space),
1749 lookbehind: true
1750 }, {
1751 pattern: /*#__PURE__*/RegExp(par + '(?:var-set|map-set|map-delete|map-insert|\
1752ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\
1753contract-call\\?)' + space),
1754 lookbehind: true
1755 }, {
1756 pattern: /*#__PURE__*/RegExp(par + '(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\
1757buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + space),
1758 lookbehind: true
1759 }, {
1760 pattern: /*#__PURE__*/RegExp(par + '(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + space),
1761 lookbehind: true
1762 }, {
1763 pattern: /*#__PURE__*/RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space),
1764 lookbehind: true
1765 }],
1766 "boolean": /(?:false|true|none)/,
1767 number: {
1768 pattern: /*#__PURE__*/primitive('[-]?u?\\d+'),
1769 lookbehind: true
1770 },
1771 address: {
1772 pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/,
1773 lookbehind: true
1774 },
1775 operator: {
1776 pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/,
1777 lookbehind: true
1778 },
1779 "function": {
1780 pattern: /(\()[^()'\s]+(?=[()\s]|$)/,
1781 lookbehind: true
1782 },
1783 punctuation: /[()']/
1784 };
1785 Prism.languages.clarity = language;
1786 })(Prism);
1787
1788 var lineNumberWidth = 60;
1789
1790 var getLineNumber = function getLineNumber(n, length) {
1791 return startPad(n + 1, length.toString().length);
1792 };
1793
1794 var Tokens = function Tokens(_ref) {
1795 var tokens = _ref.tokens,
1796 getTokenProps = _ref.getTokenProps,
1797 showLineNumbers = _ref.showLineNumbers,
1798 rest = _objectWithoutPropertiesLoose(_ref, ["tokens", "getTokenProps", "showLineNumbers"]);
1799
1800 var bsTheme = useTheme();
1801 var pl = "calc(" + (showLineNumbers ? lineNumberWidth : '0') + "px + " + (bsTheme.sizes['base'] || '16px') + ")";
1802 return React__default.createElement(Box, Object.assign({
1803 pl: pl,
1804 pr: "base",
1805 position: "relative",
1806 zIndex: 2
1807 }, rest), tokens.map(function (token, key) {
1808 return React__default.createElement(Box, Object.assign({
1809 py: "2px",
1810 display: "inline-block"
1811 }, getTokenProps({
1812 token: token,
1813 key: key
1814 })));
1815 }));
1816 };
1817
1818 var LineNumber = function LineNumber(_ref2) {
1819 var number = _ref2.number,
1820 length = _ref2.length,
1821 rest = _objectWithoutPropertiesLoose(_ref2, ["number", "length"]);
1822
1823 return React__default.createElement(Flex, Object.assign({
1824 textAlign: "right",
1825 pr: "base",
1826 pl: "base",
1827 width: lineNumberWidth,
1828 borderRight: "1px solid",
1829 borderRightColor: "inherit",
1830 color: "ink.400",
1831 flexShrink: 0,
1832 style: {
1833 userSelect: 'none'
1834 },
1835 position: "absolute",
1836 left: 0,
1837 height: "100%",
1838 align: "baseline",
1839 justify: "center",
1840 zIndex: 1
1841 }, rest), getLineNumber(number, length));
1842 };
1843
1844 var Line = function Line(_ref3) {
1845 var tokens = _ref3.tokens,
1846 getTokenProps = _ref3.getTokenProps,
1847 index = _ref3.index,
1848 length = _ref3.length,
1849 showLineNumbers = _ref3.showLineNumbers,
1850 hideLineHover = _ref3.hideLineHover,
1851 rest = _objectWithoutPropertiesLoose(_ref3, ["tokens", "getTokenProps", "index", "length", "showLineNumbers", "hideLineHover"]);
1852
1853 return React__default.createElement(Flex, Object.assign({
1854 height: "loose",
1855 align: "baseline",
1856 borderColor: "ink.900",
1857 _hover: hideLineHover ? undefined : {
1858 bg: ['unset', 'unset', 'ink.900'],
1859 borderColor: ['ink.900', 'ink.900', 'ink.600']
1860 },
1861 position: "relative"
1862 }, rest), showLineNumbers ? React__default.createElement(LineNumber, {
1863 number: index,
1864 length: length
1865 }) : null, React__default.createElement(Tokens, {
1866 showLineNumbers: showLineNumbers,
1867 getTokenProps: getTokenProps,
1868 tokens: tokens
1869 }));
1870 };
1871
1872 var Lines = function Lines(_ref4) {
1873 var lines = _ref4.tokens,
1874 getLineProps = _ref4.getLineProps,
1875 getTokenProps = _ref4.getTokenProps,
1876 className = _ref4.className,
1877 showLineNumbers = _ref4.showLineNumbers,
1878 hideLineHover = _ref4.hideLineHover;
1879 return React__default.createElement(Box, {
1880 display: "block",
1881 className: className
1882 }, React__default.createElement(Box, {
1883 display: "block",
1884 style: {
1885 fontFamily: 'Fira Code'
1886 }
1887 }, lines.map(function (tokens, i) {
1888 return React__default.createElement(Line, Object.assign({
1889 index: i,
1890 tokens: tokens,
1891 getTokenProps: getTokenProps,
1892 length: lines.length + 1,
1893 showLineNumbers: showLineNumbers,
1894 hideLineHover: hideLineHover || lines.length < 3
1895 }, getLineProps({
1896 line: tokens,
1897 key: i
1898 })));
1899 })));
1900 };
1901
1902 var Highlighter = /*#__PURE__*/React__default.memo(function (_ref5) {
1903 var code = _ref5.code,
1904 _ref5$language = _ref5.language,
1905 language = _ref5$language === void 0 ? 'clarity' : _ref5$language,
1906 showLineNumbers = _ref5.showLineNumbers,
1907 hideLineHover = _ref5.hideLineHover;
1908 return React__default.createElement(Highlight, {
1909 theme: theme$1,
1910 code: code,
1911 language: language,
1912 Prism: Prism
1913 }, function (props) {
1914 return React__default.createElement(Lines, Object.assign({
1915 showLineNumbers: showLineNumbers,
1916 hideLineHover: hideLineHover
1917 }, props));
1918 });
1919 });
1920 Highlighter.displayName = 'Highlighter';
1921
1922 var CodeBlock = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
1923 var code = _ref.code,
1924 showLineNumbers = _ref.showLineNumbers,
1925 hideLineHover = _ref.hideLineHover,
1926 _ref$style = _ref.style,
1927 style = _ref$style === void 0 ? {} : _ref$style,
1928 language = _ref.language,
1929 rest = _objectWithoutPropertiesLoose(_ref, ["code", "showLineNumbers", "hideLineHover", "style", "language"]);
1930
1931 return React__default.createElement(Box, Object.assign({
1932 overflowX: "auto",
1933 bg: "ink",
1934 borderRadius: [0, 0, '12px'],
1935 py: "base",
1936 width: "100%",
1937 ref: ref,
1938 style: _objectSpread2({}, style, {
1939 whiteSpace: 'pre',
1940 fontFamily: 'Fira Code, Consolata, monospace',
1941 fontSize: '14px'
1942 })
1943 }, rest), React__default.createElement(Highlighter, {
1944 language: language,
1945 code: code.toString().trim(),
1946 showLineNumbers: showLineNumbers,
1947 hideLineHover: hideLineHover
1948 }));
1949 });
1950
1951 var tailwindPreflight = /*#__PURE__*/styled.css(["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0;}[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{-webkit-appearance:none !important;}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}[type='search']::-webkit-search-decoration{-webkit-appearance:none !important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none !important;}html{box-sizing:border-box;font-family:sans-serif;}*,*::before,*::after{box-sizing:border-box;}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}html{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-rendering:optimizelegibility;}hr{border-top-width:1px;}img{border-style:solid;}textarea{resize:vertical;}button,[role='button']{cursor:pointer;}button::-moz-focus-inner{border:0 !important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}a{color:inherit;text-decoration:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}pre,code,kbd,samp{font-family:Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto;}"]);
1952
1953 function _templateObject2() {
1954 var data = _taggedTemplateLiteralLoose(["\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n border-color: ", ";\n }\n\n input:-ms-input-placeholder,\n textarea:-ms-input-placeholder {\n color: ", ";\n }\n\n input::-ms-input-placeholder,\n textarea::-ms-input-placeholder {\n color: ", ";\n }\n\n input::placeholder,\n textarea::placeholder {\n color: ", ";\n }\n"]);
1955
1956 _templateObject2 = function _templateObject2() {
1957 return data;
1958 };
1959
1960 return data;
1961 }
1962
1963 function _templateObject$4() {
1964 var data = _taggedTemplateLiteralLoose(["", ""]);
1965
1966 _templateObject$4 = function _templateObject() {
1967 return data;
1968 };
1969
1970 return data;
1971 }
1972
1973 var defaultConfig = function defaultConfig(theme) {
1974 return {
1975 light: {
1976 color: theme.colors.ink[900],
1977 bg: undefined,
1978 borderColor: '#E5E5EC',
1979 placeholderColor: theme.colors.ink[400]
1980 },
1981 dark: {
1982 color: 'white',
1983 bg: theme.colors.ink[900],
1984 borderColor: theme.colors.ink[600],
1985 placeholderColor: theme.colors.ink[500]
1986 }
1987 };
1988 };
1989
1990 var _defaultConfig$light = /*#__PURE__*/defaultConfig(theme).light,
1991 color$1 = _defaultConfig$light.color,
1992 bg = _defaultConfig$light.bg,
1993 borderColor = _defaultConfig$light.borderColor,
1994 placeholderColor = _defaultConfig$light.placeholderColor;
1995 var cssReset = /*#__PURE__*/styled.css(["", ";html{line-height:1.5;color:", ";background-color:", ";font-family:", ";}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:", ";}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:", ";}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:", ";}input::placeholder,textarea::placeholder{color:", ";}"], tailwindPreflight, color$1, bg, theme && theme.fonts && theme.fonts.body, borderColor, placeholderColor, placeholderColor, placeholderColor);
1996 var CSSReset = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject$4(), cssReset);
1997 var ScopedCSSReset = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2(), borderColor, placeholderColor, placeholderColor, placeholderColor);
1998
1999 var FormControlContext = /*#__PURE__*/React.createContext({});
2000 var useFormControlContext = function useFormControlContext() {
2001 return React.useContext(FormControlContext);
2002 };
2003 var useFormControl = function useFormControl(props) {
2004 var context = useFormControlContext();
2005
2006 if (!context) {
2007 return props;
2008 }
2009
2010 var keys = Object.keys(context);
2011 return keys.reduce(function (acc, prop) {
2012 acc[prop] = props[prop];
2013
2014 if (context) {
2015 if (props[prop] == null) {
2016 acc[prop] = context[prop];
2017 }
2018 }
2019
2020 return acc;
2021 }, {});
2022 };
2023 var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2024 var isInvalid = _ref.isInvalid,
2025 isRequired = _ref.isRequired,
2026 isDisabled = _ref.isDisabled,
2027 isReadOnly = _ref.isReadOnly,
2028 rest = _objectWithoutPropertiesLoose(_ref, ["isInvalid", "isRequired", "isDisabled", "isReadOnly"]);
2029
2030 var context = {
2031 isRequired: isRequired,
2032 isDisabled: isDisabled,
2033 isInvalid: isInvalid,
2034 isReadOnly: isReadOnly
2035 };
2036 return React__default.createElement(FormControlContext.Provider, {
2037 value: context
2038 }, React__default.createElement(Box, Object.assign({
2039 role: "group",
2040 ref: ref
2041 }, rest)));
2042 });
2043 FormControl.displayName = 'FormControl';
2044
2045 var assumeTextStyle = function assumeTextStyle(as) {
2046 switch (as) {
2047 case 'h1':
2048 return 'display.large';
2049
2050 case 'h2':
2051 return 'display.small';
2052
2053 case 'h3':
2054 return 'body.large.medium';
2055
2056 default:
2057 return undefined;
2058 }
2059 };
2060
2061 var Text = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2062 var textStyle = _ref.textStyle,
2063 _ref$as = _ref.as,
2064 as = _ref$as === void 0 ? 'span' : _ref$as,
2065 rest = _objectWithoutPropertiesLoose(_ref, ["textStyle", "as"]);
2066
2067 return React__default.createElement(Box, Object.assign({
2068 ref: ref,
2069 as: as,
2070 whiteSpace: "unset",
2071 display: "inline",
2072 textStyle: textStyle || assumeTextStyle(as)
2073 }, rest));
2074 });
2075 Text.displayName = 'Text';
2076
2077 var RequiredIndicator = function RequiredIndicator(props) {
2078 return React__default.createElement(Box, Object.assign({
2079 as: "span",
2080 ml: 1,
2081 color: "red",
2082 "aria-hidden": "true",
2083 children: "*"
2084 }, props));
2085 };
2086 var FormLabel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2087 var children = _ref.children,
2088 props = _objectWithoutPropertiesLoose(_ref, ["children"]);
2089
2090 var formControl = useFormControl(props);
2091 return React__default.createElement(Text, Object.assign({
2092 ref: ref,
2093 pb: "4px",
2094 opacity: formControl.isDisabled ? 0.4 : 1,
2095 textAlign: "left",
2096 verticalAlign: "middle",
2097 display: "inline-block",
2098 as: "label",
2099 textStyle: "body.small.medium"
2100 }, props), children, formControl.isRequired && React__default.createElement(RequiredIndicator, null));
2101 });
2102 FormLabel.displayName = 'FormLabel';
2103
2104 var Grid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2105 var templateColumns = _ref.templateColumns,
2106 gap = _ref.gap,
2107 rowGap = _ref.rowGap,
2108 columnGap = _ref.columnGap,
2109 autoFlow = _ref.autoFlow,
2110 autoRows = _ref.autoRows,
2111 autoColumns = _ref.autoColumns,
2112 templateRows = _ref.templateRows,
2113 templateAreas = _ref.templateAreas,
2114 area = _ref.area,
2115 column = _ref.column,
2116 row = _ref.row,
2117 props = _objectWithoutPropertiesLoose(_ref, ["templateColumns", "gap", "rowGap", "columnGap", "autoFlow", "autoRows", "autoColumns", "templateRows", "templateAreas", "area", "column", "row"]);
2118
2119 return React__default.createElement(Box, Object.assign({
2120 ref: ref,
2121 display: "grid",
2122 gridArea: area,
2123 gridTemplateAreas: templateAreas,
2124 gridGap: gap,
2125 gridRowGap: rowGap,
2126 gridColumnGap: columnGap,
2127 gridAutoColumns: autoColumns,
2128 gridColumn: column,
2129 gridRow: row,
2130 gridAutoFlow: autoFlow,
2131 gridAutoRows: autoRows,
2132 gridTemplateRows: templateRows,
2133 gridTemplateColumns: templateColumns
2134 }, props));
2135 });
2136 Grid.displayName = 'Grid';
2137
2138 var Svg = function Svg(_ref) {
2139 var _ref$width = _ref.width,
2140 width = _ref$width === void 0 ? '24px' : _ref$width,
2141 _ref$height = _ref.height,
2142 height = _ref$height === void 0 ? 'auto' : _ref$height,
2143 _ref$viewBox = _ref.viewBox,
2144 viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
2145 _ref$fill = _ref.fill,
2146 fill = _ref$fill === void 0 ? 'none' : _ref$fill,
2147 rest = _objectWithoutPropertiesLoose(_ref, ["width", "height", "viewBox", "fill"]);
2148
2149 return React.createElement(Box, Object.assign({
2150 as: "svg",
2151 width: width,
2152 height: height,
2153 viewBox: viewBox,
2154 fill: fill
2155 }, rest));
2156 };
2157
2158 var AppsIcon = function AppsIcon(props) {
2159 return React__default.createElement(Svg, Object.assign({}, props), React__default.createElement("rect", {
2160 y: "1.02686",
2161 width: "10.0435",
2162 height: "9.88235",
2163 rx: "1.75",
2164 fill: "currentColor"
2165 }), React__default.createElement("path", {
2166 opacity: "0.8",
2167 d: "M13.5697 10.9091H22.2999C23.0625 10.9091 23.5444 10.0897 23.1739 9.42317L18.8088 1.57201C18.4277 0.886573 17.4419 0.886572 17.0608 1.572L12.6957 9.42316C12.3251 10.0897 12.8071 10.9091 13.5697 10.9091Z",
2168 fill: "currentColor"
2169 }), React__default.createElement("rect", {
2170 opacity: "0.64",
2171 y: "13.7327",
2172 width: "10.4348",
2173 height: "10.2674",
2174 rx: "5.13369",
2175 fill: "currentColor"
2176 }), React__default.createElement("path", {
2177 opacity: "0.4",
2178 fillRule: "evenodd",
2179 clipRule: "evenodd",
2180 d: "M14.672 14.0339C14.4783 13.8498 14.2188 13.7479 13.9494 13.7502C13.68 13.7525 13.4224 13.8588 13.2319 14.0462C13.0414 14.2337 12.9334 14.4872 12.931 14.7523C12.9287 15.0173 13.0322 15.2726 13.2194 15.4633L16.4894 18.6809L13.2194 21.8984C13.0266 22.088 12.9182 22.3451 12.9182 22.6133C12.9181 22.746 12.9446 22.8775 12.9962 23.0002C13.0478 23.1229 13.1235 23.2344 13.2189 23.3283C13.3142 23.4222 13.4275 23.4967 13.5521 23.5476C13.6768 23.5984 13.8104 23.6246 13.9453 23.6247C14.2179 23.6248 14.4793 23.5183 14.672 23.3288L17.9421 20.1112L21.2121 23.3288C21.4049 23.5185 21.6663 23.625 21.9389 23.625C22.2116 23.625 22.473 23.5185 22.6658 23.3288C22.8585 23.1391 22.9668 22.8819 22.9668 22.6136C22.9668 22.3454 22.8585 22.0881 22.6658 21.8984L19.3957 18.6809L22.6658 15.4633C22.7612 15.3694 22.8368 15.2579 22.8884 15.1352C22.94 15.0125 22.9665 14.881 22.9665 14.7483C22.9664 14.6155 22.9398 14.484 22.8881 14.3614C22.8364 14.2387 22.7607 14.1273 22.6653 14.0334C22.5698 13.9396 22.4565 13.8651 22.3318 13.8144C22.2071 13.7636 22.0735 13.7375 21.9386 13.7375C21.8036 13.7376 21.67 13.7638 21.5454 13.8146C21.4207 13.8655 21.3075 13.94 21.2121 14.0339L17.9421 17.2515L14.672 14.0339Z",
2181 fill: "currentColor"
2182 }));
2183 };
2184
2185 var rotate = function rotate(direction) {
2186 if (direction === void 0) {
2187 direction = 'up';
2188 }
2189
2190 switch (direction) {
2191 case 'up':
2192 return 0;
2193
2194 case 'right':
2195 return '90';
2196
2197 case 'down':
2198 return '180';
2199
2200 case 'left':
2201 return '270';
2202
2203 default:
2204 throw new Error('`rotate` must receive direction parameter');
2205 }
2206 };
2207
2208 var ArrowIcon = function ArrowIcon(_ref) {
2209 var direction = _ref.direction,
2210 style = _ref.style,
2211 props = _objectWithoutPropertiesLoose(_ref, ["direction", "style"]);
2212
2213 return React.createElement(Svg, Object.assign({
2214 width: "11px",
2215 height: "14px",
2216 viewBox: "0 0 11 14",
2217 style: _objectSpread2({}, style, {
2218 transform: "rotate(" + rotate(direction) + "deg)"
2219 })
2220 }, props), React.createElement("path", {
2221 d: "M5.5 13.559c.444 0 .759-.315.759-.766V4.351l-.055-1.477 1.77 1.976 1.56 1.545a.765.765 0 00.54.225c.416 0 .73-.314.73-.745a.754.754 0 00-.239-.547L6.061.816a.78.78 0 00-1.128 0L.435 5.328a.754.754 0 00-.24.547c0 .43.308.745.725.745.219 0 .41-.089.547-.225L3.019 4.85l1.777-1.983-.062 1.484v8.442c0 .451.315.766.766.766z",
2222 fill: "currentColor"
2223 }));
2224 };
2225
2226 var BlockchainIcon = function BlockchainIcon(props) {
2227 var color = props.color || 'currentColor';
2228 return React.createElement(Svg, Object.assign({}, props), React.createElement("rect", {
2229 width: "12",
2230 height: "12",
2231 rx: "2.25",
2232 fill: color
2233 }), React.createElement("rect", {
2234 opacity: "0.6",
2235 x: "12",
2236 y: "12",
2237 width: "12",
2238 height: "12",
2239 rx: "2.25",
2240 fill: color
2241 }), React.createElement("rect", {
2242 opacity: "0.4",
2243 x: "14.75",
2244 y: "2.75",
2245 width: "6.5",
2246 height: "6.5",
2247 rx: "1",
2248 stroke: color,
2249 strokeWidth: "1.5",
2250 strokeLinejoin: "round"
2251 }), React.createElement("rect", {
2252 opacity: "0.4",
2253 x: "2.75",
2254 y: "14.75",
2255 width: "6.5",
2256 height: "6.5",
2257 rx: "1",
2258 stroke: color,
2259 strokeWidth: "1.5",
2260 strokeLinejoin: "round"
2261 }));
2262 };
2263
2264 var BlockstackIcon = function BlockstackIcon(props) {
2265 return React.createElement(Svg, Object.assign({
2266 width: "12",
2267 height: "12",
2268 viewBox: "0 0 12 12",
2269 fill: "none"
2270 }, props), React.createElement("path", {
2271 fillRule: "evenodd",
2272 clipRule: "evenodd",
2273 d: "M0.148042 1.08513C-5.58794e-08 1.42724 -3.80998e-08 1.86349 0 2.736L1.42713e-07 6L2.85387e-07 9.264C3.23525e-07 10.1365 0 10.5728 0.148042 10.9149C0.329866 11.335 0.664964 11.6701 1.08513 11.852C1.42724 12 1.86349 12 2.736 12H6H9.264C10.1365 12 10.5728 12 10.9149 11.852C11.335 11.6701 11.6701 11.335 11.852 10.9149C12 10.5728 12 10.1365 12 9.264V6V2.736C12 1.86349 12 1.42724 11.852 1.08513C11.6701 0.664963 11.335 0.329865 10.9149 0.148041C10.5728 -6.70552e-08 10.1365 -3.80998e-08 9.264 0L6 1.42713e-07L2.736 2.85387e-07C1.86349 3.23525e-07 1.40625 2.90573e-07 1.08513 0.148042C0.664964 0.329867 0.329866 0.664963 0.148042 1.08513ZM7.91566 5.16965C7.31682 5.16965 6.83125 4.68409 6.83125 4.08511C6.83125 3.48644 7.31682 3.00088 7.91566 3.00088C8.5145 3.00088 9.00007 3.48644 9.00007 4.08511C9.00007 4.68409 8.5145 5.16965 7.91566 5.16965ZM5.16787 4.085C5.16787 4.68358 4.68253 5.16893 4.08382 5.16893C3.48541 5.16893 3.00007 4.68358 3.00007 4.085C3.00007 3.48643 3.48541 3.00107 4.08382 3.00107C4.68253 3.00107 5.16787 3.48643 5.16787 4.085ZM7.91576 6.83459C7.31679 6.83459 6.83123 7.32016 6.83123 7.919C6.83123 8.51785 7.31679 9.00342 7.91576 9.00342C8.51444 9.00342 9 8.51785 9 7.919C9 7.32016 8.51444 6.83459 7.91576 6.83459ZM4.08392 6.83565C4.68248 6.83565 5.16783 7.32098 5.16783 7.91969C5.16783 8.51809 4.68248 9.00342 4.08392 9.00342C3.48535 9.00342 3 8.51809 3 7.91969C3 7.32098 3.48535 6.83565 4.08392 6.83565Z",
2274 fill: props.color || 'currentColor'
2275 }));
2276 };
2277
2278 var CheckmarkIcon = function CheckmarkIcon(_ref) {
2279 var _ref$size = _ref.size,
2280 size = _ref$size === void 0 ? 72 : _ref$size,
2281 _ref$color = _ref.color,
2282 color = _ref$color === void 0 ? 'currentColor' : _ref$color,
2283 props = _objectWithoutPropertiesLoose(_ref, ["size", "color"]);
2284
2285 return React.createElement(Svg, Object.assign({
2286 width: size,
2287 height: size,
2288 fill: "none",
2289 viewBox: "0 0 72 72"
2290 }, props), React.createElement("circle", {
2291 cx: "36",
2292 cy: "36",
2293 r: "34.5",
2294 fill: "#fff",
2295 stroke: color,
2296 strokeWidth: "3"
2297 }), React.createElement("path", {
2298 stroke: color,
2299 strokeLinecap: "round",
2300 strokeLinejoin: "round",
2301 strokeWidth: "3",
2302 d: "M21 37l10 10 20-22"
2303 }));
2304 };
2305
2306 var CheckmarkCircleIcon = function CheckmarkCircleIcon(props) {
2307 return React__default.createElement(Box, Object.assign({}, props), React__default.createElement("svg", {
2308 width: "100%",
2309 viewBox: "0 0 16 17",
2310 fill: "none"
2311 }, React__default.createElement("path", {
2312 d: "M7.99613 16.9961C12.3809 16.9961 16 13.377 16 8.99996C16 4.61523 12.3731 0.996094 7.9884 0.996094C3.61141 0.996094 0 4.61523 0 8.99996C0 13.377 3.61914 16.9961 7.99613 16.9961ZM6.94442 13.0367C6.65056 13.0367 6.41856 12.9052 6.1943 12.6423L3.96713 9.92794C3.82794 9.75781 3.75834 9.56448 3.75834 9.37889C3.75834 8.96129 4.08313 8.64423 4.47753 8.64423C4.71725 8.64423 4.91832 8.74476 5.11165 8.97676L6.92122 11.2581L10.4089 5.69015C10.579 5.41175 10.8033 5.28029 11.043 5.28029C11.4297 5.28029 11.8009 5.55095 11.8009 5.96081C11.8009 6.14641 11.7081 6.33974 11.5998 6.50987L7.67134 12.6191C7.48574 12.8975 7.23828 13.0367 6.94442 13.0367Z",
2313 fill: "currentColor"
2314 })));
2315 };
2316
2317 var rotate$1 = function rotate(direction) {
2318 if (direction === void 0) {
2319 direction = 'right';
2320 }
2321
2322 switch (direction) {
2323 case 'left':
2324 return '90';
2325
2326 case 'up':
2327 return '180';
2328
2329 case 'right':
2330 return '270';
2331
2332 case 'down':
2333 return 0;
2334
2335 default:
2336 throw new Error('`rotate` must receive direction parameter');
2337 }
2338 };
2339
2340 var ChevronIcon = function ChevronIcon(_ref) {
2341 var direction = _ref.direction,
2342 _ref$size = _ref.size,
2343 size = _ref$size === void 0 ? '16px' : _ref$size,
2344 _ref$style = _ref.style,
2345 style = _ref$style === void 0 ? {} : _ref$style,
2346 props = _objectWithoutPropertiesLoose(_ref, ["direction", "size", "style"]);
2347
2348 return React.createElement(Svg, Object.assign({
2349 width: size,
2350 height: size,
2351 viewBox: "0 0 16 16",
2352 style: _objectSpread2({}, style, {
2353 transform: "rotate(" + rotate$1(direction) + "deg)"
2354 })
2355 }, props), React.createElement("path", {
2356 fill: props.color || 'currentColor',
2357 d: "M4.7 7.367l3.3 3.3 3.3-3.3-.943-.943L8 8.78 5.643 6.424l-.943.943z"
2358 }));
2359 };
2360
2361 var ConnectLogoIcon = function ConnectLogoIcon(_ref) {
2362 var _ref$color = _ref.color,
2363 color = _ref$color === void 0 ? 'currentColor' : _ref$color,
2364 props = _objectWithoutPropertiesLoose(_ref, ["color"]);
2365
2366 return React.createElement(Svg, Object.assign({
2367 color: color
2368 }, props), React.createElement("rect", {
2369 width: "24",
2370 height: "24",
2371 rx: "12",
2372 fill: "currentColor",
2373 opacity: "0.15"
2374 }), React.createElement("path", {
2375 d: "M15.2727 10.0179H14.8636V8.8125C14.8636 8.06658 14.5619 7.35121 14.0249 6.82376C13.4879 6.29632 12.7595 6 12 6C11.2405 6 10.5121 6.29632 9.9751 6.82376C9.43807 7.35121 9.13636 8.06658 9.13636 8.8125V10.0179H8.72727C8.40189 10.0182 8.08994 10.1453 7.85985 10.3713C7.62977 10.5973 7.50036 10.9036 7.5 11.2232V16.0446C7.50036 16.3642 7.62977 16.6706 7.85985 16.8966C8.08994 17.1225 8.40189 17.2497 8.72727 17.25H15.2727C15.5981 17.2497 15.9101 17.1225 16.1401 16.8966C16.3702 16.6706 16.4996 16.3642 16.5 16.0446V11.2232C16.4996 10.9036 16.3702 10.5973 16.1401 10.3713C15.9101 10.1453 15.5981 10.0182 15.2727 10.0179ZM9.95455 8.8125C9.95455 8.2797 10.17 7.76872 10.5536 7.39197C10.9372 7.01523 11.4575 6.80357 12 6.80357C12.5425 6.80357 13.0628 7.01523 13.4464 7.39197C13.83 7.76872 14.0455 8.2797 14.0455 8.8125V10.0179H9.95455V8.8125ZM12.4091 13.7231V14.6384C12.4091 14.745 12.366 14.8471 12.2893 14.9225C12.2126 14.9978 12.1085 15.0402 12 15.0402C11.8915 15.0402 11.7874 14.9978 11.7107 14.9225C11.634 14.8471 11.5909 14.745 11.5909 14.6384V13.7231C11.4349 13.6346 11.313 13.4981 11.2441 13.3347C11.1752 13.1712 11.1631 12.99 11.2097 12.8192C11.2563 12.6483 11.359 12.4973 11.5019 12.3896C11.6448 12.282 11.8199 12.2236 12 12.2236C12.1801 12.2236 12.3552 12.282 12.4981 12.3896C12.641 12.4973 12.7437 12.6483 12.7903 12.8192C12.8369 12.99 12.8248 13.1712 12.7559 13.3347C12.687 13.4981 12.5651 13.6346 12.4091 13.7231Z",
2376 fill: "currentColor"
2377 }), React.createElement("rect", {
2378 x: "10.5",
2379 y: "11.25",
2380 width: "3",
2381 height: "5.25",
2382 fill: "currentColor"
2383 }));
2384 };
2385
2386 var EncryptionIcon = function EncryptionIcon(props) {
2387 return React.createElement(Svg, Object.assign({}, props), React.createElement("path", {
2388 d: "M18.5818 8.57143H17.7091V6C17.7091 4.4087 17.0655 2.88258 15.9198 1.75736C14.7741 0.632141 13.2202 0 11.6 0C9.97977 0 8.4259 0.632141 7.28022 1.75736C6.13454 2.88258 5.49091 4.4087 5.49091 6V8.57143H4.61818C3.92403 8.57218 3.25853 8.84334 2.76769 9.32541C2.27685 9.80748 2.00076 10.4611 2 11.1429V21.4286C2.00076 22.1103 2.27685 22.7639 2.76769 23.246C3.25853 23.7281 3.92403 23.9993 4.61818 24H18.5818C19.276 23.9993 19.9415 23.7281 20.4323 23.246C20.9231 22.7639 21.1992 22.1103 21.2 21.4286V11.1429C21.1992 10.4611 20.9231 9.80748 20.4323 9.32541C19.9415 8.84334 19.276 8.57218 18.5818 8.57143ZM7.23636 6C7.23636 4.86336 7.6961 3.77327 8.51444 2.96954C9.33278 2.16582 10.4427 1.71429 11.6 1.71429C12.7573 1.71429 13.8672 2.16582 14.6856 2.96954C15.5039 3.77327 15.9636 4.86336 15.9636 6V8.57143H7.23636V6Z",
2389 fill: "currentColor"
2390 }));
2391 };
2392
2393 var ExclamationMarkIcon = function ExclamationMarkIcon(props) {
2394 return React.createElement(Svg, Object.assign({
2395 width: "12",
2396 height: "12",
2397 fill: "none",
2398 viewBox: "0 0 12 12"
2399 }, props), React.createElement("circle", {
2400 cx: "6",
2401 cy: "6",
2402 r: "6",
2403 fill: props.color || 'currentColor'
2404 }), React.createElement("path", {
2405 fill: "#fff",
2406 d: "M6.62 3.64a.622.622 0 10-1.244 0l.083 2.983a.54.54 0 001.081 0l.08-2.984zM6 9c.368 0 .687-.31.69-.694A.7.7 0 006 7.617.69.69 0 006 9z"
2407 }));
2408 };
2409
2410 var ExclamationMarkCircleIcon = function ExclamationMarkCircleIcon(props) {
2411 return React__default.createElement(Box, Object.assign({}, props), React__default.createElement("svg", {
2412 width: "100%",
2413 viewBox: "0 0 16 16",
2414 fill: "none"
2415 }, React__default.createElement("path", {
2416 fillRule: "evenodd",
2417 clipRule: "evenodd",
2418 d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM7.9983 4C8.46541 4 8.84049 4.38536 8.82787 4.8523L8.72037 8.82986C8.70981 9.22031 8.39026 9.53134 7.99967 9.53134C7.60928 9.53134 7.28981 9.2206 7.279 8.83036L7.16874 4.85287C7.15579 4.38572 7.53096 4 7.9983 4ZM8.9199 11.0743C8.91607 11.5873 8.49058 12 7.99992 12C7.49392 12 7.0761 11.5873 7.07993 11.0743C7.0761 10.569 7.49392 10.1562 7.99992 10.1562C8.49058 10.1562 8.91607 10.569 8.9199 11.0743Z",
2419 fill: "currentColor"
2420 })));
2421 };
2422
2423 var EyeIcon = function EyeIcon(props) {
2424 return React.createElement(Svg, Object.assign({
2425 width: "24",
2426 height: "20",
2427 viewBox: "0 0 24 20"
2428 }, props), React.createElement("path", {
2429 fillRule: "evenodd",
2430 clipRule: "evenodd",
2431 d: "M19.695 0.351482C19.9032 0.135371 20.1868 0.00948757 20.4855 0.000511017C20.7171 -0.00642408 20.9454 0.057366 21.1405 0.183512C21.3356 0.309658 21.4883 0.492283 21.5786 0.707441C21.669 0.922599 21.6927 1.16026 21.6468 1.38926C21.6008 1.61827 21.4873 1.82793 21.3212 1.99078L4.3048 19.1469C4.19867 19.2575 4.07178 19.3456 3.93152 19.4062C3.79125 19.4668 3.64043 19.4987 3.48783 19.5C3.33523 19.5012 3.1839 19.4718 3.04268 19.4135C2.90146 19.3552 2.77316 19.2691 2.66526 19.1603C2.55735 19.0515 2.47201 18.9222 2.4142 18.7798C2.35639 18.6374 2.32727 18.4849 2.32854 18.331C2.3298 18.1771 2.36143 18.0251 2.42157 17.8837C2.48171 17.7423 2.56917 17.6143 2.67885 17.5074L19.695 0.351482ZM0.193655 8.95376C2.47935 4.5123 7.03523 1.71636 11.9982 1.71636C13.5143 1.71601 14.9919 1.97725 16.3789 2.46512L14.7583 4.09901C13.9263 3.68538 12.9904 3.45188 12 3.45188C8.55044 3.45188 5.754 6.27118 5.75403 9.74917C5.75404 10.7476 5.98562 11.6913 6.39588 12.5301L3.92169 15.0246C2.39514 13.8491 1.11258 12.3359 0.194802 10.5571C-0.0645738 10.0547 -0.0649106 9.45653 0.193655 8.95376ZM17.6041 6.96802L20.0781 4.47375C21.6047 5.64932 22.8874 7.16248 23.8052 8.94153C24.0646 9.44387 24.0649 10.042 23.8064 10.5448C21.5205 14.9863 16.9647 17.7818 12.0018 17.7818C10.4857 17.7821 9.00815 17.5209 7.62116 17.033L9.2415 15.3994C10.0735 15.813 11.0096 16.0465 12 16.0465C15.4496 16.0465 18.246 13.227 18.246 9.74917C18.246 8.75058 18.0145 7.80688 17.6041 6.96802ZM9.24284 6.96914C10.0042 6.20163 11.0022 5.81824 12 5.81824C12.3155 5.81824 12.6308 5.85684 12.9387 5.93349L8.2154 10.6956C7.89855 9.40286 8.24082 7.97945 9.24284 6.96914ZM11.0613 13.5647L15.7846 8.80249C16.1013 10.0952 15.7589 11.5184 14.7569 12.5285C13.755 13.5388 12.3434 13.8839 11.0613 13.5647Z",
2432 fill: props.color || 'currentColor'
2433 }), React.createElement("path", {
2434 d: "M19.6951 0.351482C19.9034 0.135371 20.1869 0.00948757 20.4856 0.000511017C20.7173 -0.00642408 20.9456 0.057366 21.1406 0.183512C21.3357 0.309658 21.4884 0.492283 21.5787 0.707441C21.6691 0.922599 21.6928 1.16026 21.6469 1.38926C21.6009 1.61827 21.4874 1.82793 21.3213 1.99078L4.30491 19.1469C4.19879 19.2575 4.07189 19.3456 3.93163 19.4062C3.79137 19.4668 3.64054 19.4987 3.48794 19.5C3.33534 19.5012 3.18402 19.4718 3.0428 19.4135C2.90157 19.3552 2.77327 19.2691 2.66537 19.1603C2.55747 19.0515 2.47213 18.9222 2.41432 18.7798C2.35651 18.6374 2.32739 18.4849 2.32865 18.331C2.32992 18.1771 2.36154 18.0251 2.42169 17.8837C2.48183 17.7423 2.56929 17.6143 2.67896 17.5074L19.6951 0.351482Z",
2435 fill: props.color || 'currentColor'
2436 }));
2437 };
2438
2439 var PadlockIcon = function PadlockIcon(props) {
2440 return React.createElement(Svg, Object.assign({
2441 width: "64",
2442 height: "64",
2443 fill: "none",
2444 viewBox: "0 0 64 64"
2445 }, props), React.createElement("path", {
2446 d: "M0 25.6C0 16.6392 0 12.1587 1.7439 8.73615C3.27787 5.72556 5.72556 3.27787 8.73615 1.7439C12.1587 0 16.6392 0 25.6 0L38.4 0C47.3608 0 51.8413 0 55.2638 1.7439C58.2744 3.27787 60.7221 5.72556 62.2561 8.73615C64 12.1587 64 16.6392 64 25.6V38.4C64 47.3608 64 51.8413 62.2561 55.2638C60.7221 58.2744 58.2744 60.7221 55.2638 62.2561C51.8413 64 47.3608 64 38.4 64H25.6C16.6392 64 12.1587 64 8.73615 62.2561C5.72556 60.7221 3.27787 58.2744 1.7439 55.2638C0 51.8413 0 47.3608 0 38.4L0 25.6Z",
2447 fill: "currentColor",
2448 opacity: "0.15"
2449 }), React.createElement("path", {
2450 d: "M40.7273 26.7143H39.6364V23.5C39.6364 21.5109 38.8318 19.6032 37.3997 18.1967C35.9676 16.7902 34.0253 16 32 16C29.9747 16 28.0324 16.7902 26.6003 18.1967C25.1682 19.6032 24.3636 21.5109 24.3636 23.5V26.7143H23.2727C22.405 26.7152 21.5732 27.0542 20.9596 27.6568C20.3461 28.2594 20.001 29.0764 20 29.9286V42.7857C20.001 43.6379 20.3461 44.4549 20.9596 45.0575C21.5732 45.6601 22.405 45.9991 23.2727 46H40.7273C41.595 45.9991 42.4268 45.6601 43.0404 45.0575C43.6539 44.4549 43.999 43.6379 44 42.7857V29.9286C43.999 29.0764 43.6539 28.2594 43.0404 27.6568C42.4268 27.0542 41.595 26.7152 40.7273 26.7143ZM26.5455 23.5C26.5455 22.0792 27.1201 20.7166 28.1431 19.7119C29.166 18.7073 30.5534 18.1429 32 18.1429C33.4466 18.1429 34.834 18.7073 35.8569 19.7119C36.8799 20.7166 37.4545 22.0792 37.4545 23.5V26.7143H26.5455V23.5Z",
2451 fill: "currentColor"
2452 }));
2453 };
2454
2455 var PlusCircleIcon = function PlusCircleIcon(props) {
2456 return React.createElement(Svg, Object.assign({}, props), React.createElement("circle", {
2457 cx: "12",
2458 cy: "12",
2459 r: "12",
2460 fill: "currentColor"
2461 }), React.createElement("g", {
2462 clipPath: "url(#clip0)"
2463 }, React.createElement("path", {
2464 fill: "#fff",
2465 fillRule: "evenodd",
2466 d: "M8.36 11.25a.75.75 0 000 1.5h3.375v3.376a.75.75 0 001.5 0V12.75h3.377a.75.75 0 000-1.5h-3.376V7.874a.75.75 0 10-1.5 0v3.376H8.358z",
2467 clipRule: "evenodd"
2468 })), React.createElement("defs", null, React.createElement("clipPath", {
2469 id: "clip0"
2470 }, React.createElement("path", {
2471 fill: "#fff",
2472 d: "M4 12H16V24H4z",
2473 transform: "rotate(-45 4 12)"
2474 }))));
2475 };
2476
2477 var PrivateIcon = function PrivateIcon(props) {
2478 return React.createElement(Svg, Object.assign({
2479 width: "18",
2480 height: "24",
2481 viewBox: "0 0 18 24",
2482 fill: "none"
2483 }, props), React.createElement("path", {
2484 d: "M15.5455 8.57143H14.7273V6C14.7273 4.4087 14.1239 2.88258 13.0498 1.75736C11.9757 0.632141 10.519 0 9 0C7.48103 0 6.02428 0.632141 4.95021 1.75736C3.87614 2.88258 3.27273 4.4087 3.27273 6V8.57143H2.45455C1.80378 8.57218 1.17987 8.84334 0.719709 9.32541C0.259547 9.80748 0.000714665 10.4611 0 11.1429V21.4286C0.000714665 22.1103 0.259547 22.7639 0.719709 23.246C1.17987 23.7281 1.80378 23.9993 2.45455 24H15.5455C16.1962 23.9993 16.8201 23.7281 17.2803 23.246C17.7405 22.7639 17.9993 22.1103 18 21.4286V11.1429C17.9993 10.4611 17.7405 9.80748 17.2803 9.32541C16.8201 8.84334 16.1962 8.57218 15.5455 8.57143ZM4.90909 6C4.90909 4.86336 5.3401 3.77327 6.10729 2.96954C6.87449 2.16582 7.91502 1.71429 9 1.71429C10.085 1.71429 11.1255 2.16582 11.8927 2.96954C12.6599 3.77327 13.0909 4.86336 13.0909 6V8.57143H4.90909V6Z",
2485 fill: "currentColor"
2486 }));
2487 };
2488
2489 var UnionLineIcon = function UnionLineIcon(props) {
2490 return React.createElement(Svg, Object.assign({
2491 width: "32",
2492 height: "7",
2493 fill: "none",
2494 viewBox: "0 0 32 7"
2495 }, props), React.createElement("mask", {
2496 id: "a",
2497 width: "32",
2498 height: "7",
2499 x: "0",
2500 y: "0",
2501 fill: "#000",
2502 maskUnits: "userSpaceOnUse"
2503 }, React.createElement("path", {
2504 fill: "#fff",
2505 d: "M0 0H32V7H0z"
2506 }), React.createElement("path", {
2507 fillRule: "evenodd",
2508 d: "M3.5 5a1.5 1.5 0 001.415-1h22.17a1.5 1.5 0 100-1H4.915A1.5 1.5 0 103.5 5z",
2509 clipRule: "evenodd"
2510 })), React.createElement("path", {
2511 fill: "#677282",
2512 fillRule: "evenodd",
2513 d: "M3.5 5a1.5 1.5 0 001.415-1h22.17a1.5 1.5 0 100-1H4.915A1.5 1.5 0 103.5 5z",
2514 clipRule: "evenodd"
2515 }), React.createElement("path", {
2516 fill: "#fff",
2517 d: "M4.915 4V2H3.5L3.03 3.334 4.915 4zm22.17 0l1.886-.667L28.5 2h-1.415v2zm0-1v2H28.5l.471-1.333L27.085 3zM4.915 3l-1.886.666L3.5 5h1.415V3zm-1.886.334A.5.5 0 013.5 3v4a3.5 3.5 0 003.3-2.334L3.03 3.334zM27.085 2H4.915v4h22.17V2zM28.5 3a.5.5 0 01.471.333L25.2 4.667A3.5 3.5 0 0028.5 7V3zm-.5.5a.5.5 0 01.5-.5v4A3.5 3.5 0 0032 3.5h-4zm.5.5a.5.5 0 01-.5-.5h4A3.5 3.5 0 0028.5 0v4zm.471-.333A.5.5 0 0128.5 4V0a3.5 3.5 0 00-3.3 2.333l3.771 1.333zM4.915 5h22.17V1H4.915v4zM3.5 4a.5.5 0 01-.471-.334L6.8 2.334A3.5 3.5 0 003.5 0v4zm.5-.5a.5.5 0 01-.5.5V0A3.5 3.5 0 000 3.5h4zM3.5 3a.5.5 0 01.5.5H0A3.5 3.5 0 003.5 7V3z",
2518 mask: "url(#a)"
2519 }));
2520 };
2521
2522 var CloseIcon = function CloseIcon(props) {
2523 return React__default.createElement(Box, Object.assign({}, props), React__default.createElement(Svg, {
2524 width: "100%",
2525 viewBox: "0 0 10 10"
2526 }, React__default.createElement("path", {
2527 fillRule: "evenodd",
2528 clipRule: "evenodd",
2529 d: "M1.81707 0.403005C1.62846 0.220847 1.37586 0.120052 1.11366 0.122331C0.851468 0.124609 0.600656 0.229778 0.415247 0.415186C0.229839 0.600595 0.12467 0.851407 0.122392 1.1136C0.120113 1.3758 0.220908 1.6284 0.403066 1.81701L3.58607 5L0.403066 8.183C0.215425 8.37051 0.109957 8.62488 0.109863 8.89015C0.109817 9.0215 0.135642 9.15157 0.185864 9.27294C0.236086 9.39431 0.309721 9.50459 0.402566 9.5975C0.495411 9.69041 0.605646 9.76413 0.726978 9.81444C0.848311 9.86475 0.978364 9.89066 1.10971 9.89071C1.37498 9.8908 1.62943 9.78551 1.81707 9.598L5.00007 6.415L8.18307 9.598C8.37071 9.78564 8.6252 9.89106 8.89057 9.89106C9.15593 9.89106 9.41043 9.78564 9.59807 9.598C9.78571 9.41036 9.89112 9.15587 9.89112 8.8905C9.89112 8.62514 9.78571 8.37065 9.59807 8.183L6.41507 5L9.59807 1.81701C9.69091 1.7241 9.76454 1.61381 9.81477 1.49244C9.86499 1.37107 9.89082 1.241 9.89077 1.10965C9.89072 0.978303 9.86481 0.84825 9.8145 0.726917C9.76419 0.605585 9.69048 0.49535 9.59757 0.402505C9.50466 0.30966 9.39437 0.236025 9.273 0.185803C9.15163 0.135581 9.02156 0.109756 8.89021 0.109802C8.75886 0.109849 8.62881 0.135766 8.50748 0.186073C8.38615 0.236381 8.27591 0.310094 8.18307 0.403005L5.00007 3.58601L1.81707 0.403005Z",
2530 fill: "currentColor"
2531 })));
2532 };
2533
2534 var ExternalIcon = function ExternalIcon(props) {
2535 return React.createElement(Svg, Object.assign({
2536 width: "8",
2537 height: "9",
2538 viewBox: "0 0 8 9",
2539 fill: "none"
2540 }, props), React.createElement("path", {
2541 fillRule: "evenodd",
2542 clipRule: "evenodd",
2543 d: "M1.30849 0H7.04391H7.99975H7.99981V6.6919H7.04391V1.66447L0.707141 8.00185L0 7.29477L6.33818 0.955986H1.30849V0Z",
2544 fill: "#677282"
2545 }));
2546 };
2547
2548 var FailedIcon = function FailedIcon(_ref) {
2549 var _ref$size = _ref.size,
2550 size = _ref$size === void 0 ? 64 : _ref$size,
2551 props = _objectWithoutPropertiesLoose(_ref, ["size"]);
2552
2553 return React.createElement(Svg, Object.assign({
2554 width: size,
2555 height: size,
2556 viewBox: "0 0 64 64",
2557 fill: "none"
2558 }, props), React.createElement("circle", {
2559 cx: "32",
2560 cy: "32",
2561 r: "30",
2562 stroke: "#D4001A",
2563 strokeWidth: "4",
2564 strokeLinecap: "round"
2565 }), React.createElement("path", {
2566 d: "M23 41L40.9995 23",
2567 stroke: "#D4001A",
2568 strokeWidth: "4",
2569 strokeLinecap: "round",
2570 strokeLinejoin: "round"
2571 }), React.createElement("path", {
2572 d: "M41 41L23.0005 23",
2573 stroke: "#D4001A",
2574 strokeWidth: "4",
2575 strokeLinecap: "round",
2576 strokeLinejoin: "round"
2577 }));
2578 };
2579
2580 var defaultStyle = {
2581 height: 12,
2582 border: '1px solid',
2583 borderBottomColor: 'inherit',
2584 borderLeftColor: 'inherit',
2585 borderRightColor: 'inherit',
2586 borderTopColor: 'inherit',
2587 borderColor: 'inherit',
2588 bg: 'white',
2589 _hover: {
2590 borderBottomColor: 'ink.300',
2591 borderLeftColor: 'ink.300',
2592 borderRightColor: 'ink.300',
2593 borderTopColor: 'ink.300',
2594 borderColor: 'ink.300'
2595 },
2596 _disabled: {
2597 bg: '#f9f9fc',
2598 cursor: 'not-allowed',
2599 pointerEvents: 'none'
2600 },
2601 _focus: {
2602 borderBottomColor: 'blue.300',
2603 borderLeftColor: 'blue.300',
2604 borderRightColor: 'blue.300',
2605 borderTopColor: 'blue.300',
2606 borderColor: 'blue.300',
2607 boxShadow: '0 0 0 1px rgba(170, 179, 255, 0.75)'
2608 },
2609 _invalid: {
2610 borderBottomColor: 'red',
2611 borderLeftColor: 'red',
2612 borderRightColor: 'red',
2613 borderTopColor: 'red',
2614 borderColor: 'red'
2615 }
2616 };
2617 var baseProps$1 = {
2618 display: 'flex',
2619 alignItems: 'center',
2620 position: 'relative',
2621 transition: 'all 0.2s',
2622 outline: 'none',
2623 borderRadius: '6px',
2624 p: '14px 16px'
2625 };
2626 var inputSizes = {
2627 "default": {
2628 fontSize: 'body.small',
2629 height: '12',
2630 lineHeight: 'base'
2631 }
2632 };
2633
2634 var useInputStyle = function useInputStyle(props) {
2635 return _objectSpread2({
2636 width: props.isFullWidth ? '100%' : undefined
2637 }, baseProps$1, {}, defaultStyle);
2638 };
2639
2640 var InputAddon = function InputAddon(_ref) {
2641 var _ref$placement = _ref.placement,
2642 placement = _ref$placement === void 0 ? 'left' : _ref$placement,
2643 props = _objectWithoutPropertiesLoose(_ref, ["placement"]);
2644
2645 var _placement = {
2646 left: {
2647 mr: '-1px',
2648 roundedRight: 0,
2649 borderRightColor: 'transparent',
2650 borderLeftWidth: 0
2651 },
2652 right: {
2653 order: 1,
2654 roundedLeft: 0,
2655 borderLeftColor: 'transparent',
2656 borderLeftWidth: 0
2657 }
2658 };
2659
2660 var styleProps = _objectSpread2({}, useInputStyle({
2661 variant: 'outline'
2662 }), {
2663 flex: '0 0 auto',
2664 whiteSpace: 'nowrap',
2665 bg: 'white',
2666 fontSize: 'body.small'
2667 }, _placement[placement]);
2668
2669 return React__default.createElement(Box, Object.assign({}, styleProps, props, {
2670 css: {
2671 'input:focus + &': {
2672 zIndex: -1
2673 }
2674 }
2675 }));
2676 };
2677
2678 InputAddon.propTypes = {
2679 placement: /*#__PURE__*/propTypes.oneOf(['left', 'right'])
2680 } ;
2681 InputAddon.displayName = 'InputAddon';
2682
2683 var InputLeftAddon = function InputLeftAddon(props) {
2684 return React__default.createElement(InputAddon, Object.assign({
2685 placement: "left"
2686 }, props));
2687 };
2688
2689 var InputRightAddon = function InputRightAddon(props) {
2690 return React__default.createElement(InputAddon, Object.assign({
2691 placement: "right"
2692 }, props));
2693 };
2694
2695 var InputElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
2696 var _placementProp;
2697
2698 var _ref$size = _ref.size,
2699 size = _ref$size === void 0 ? 'default' : _ref$size,
2700 children = _ref.children,
2701 _ref$placement = _ref.placement,
2702 placement = _ref$placement === void 0 ? 'left' : _ref$placement,
2703 _ref$disablePointerEv = _ref.disablePointerEvents,
2704 disablePointerEvents = _ref$disablePointerEv === void 0 ? false : _ref$disablePointerEv,
2705 props = _objectWithoutPropertiesLoose(_ref, ["size", "children", "placement", "disablePointerEvents"]);
2706
2707 var height = inputSizes[size] && inputSizes[size].height;
2708 var fontSize = inputSizes[size] && inputSizes[size].fontSize;
2709 var placementProp = (_placementProp = {}, _placementProp[placement] = '0', _placementProp);
2710 return React__default.createElement(Box, Object.assign({
2711 display: "flex",
2712 alignItems: "center",
2713 justifyContent: "center",
2714 position: "absolute",
2715 height: height,
2716 width: height,
2717 fontSize: fontSize,
2718 top: "0",
2719 zIndex: 1,
2720 ref: ref
2721 }, disablePointerEvents && {
2722 pointerEvents: 'none'
2723 }, placementProp, props), children);
2724 });
2725 var InputLeftElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
2726 return React__default.createElement(InputElement, Object.assign({
2727 ref: ref,
2728 placement: "left"
2729 }, props));
2730 });
2731 var InputRightElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
2732 return React__default.createElement(InputElement, Object.assign({
2733 ref: ref,
2734 placement: "right"
2735 }, props));
2736 });
2737 InputElement.displayName = 'InputElement';
2738 InputLeftElement.displayName = 'InputLeftElement';
2739 InputRightElement.displayName = 'InputRightElement';
2740
2741 var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
2742 var as = props.as,
2743 ariaLabel = props['aria-label'],
2744 ariaDescribedby = props['aria-describedby'],
2745 isReadOnly = props.isReadOnly,
2746 _props$style = props.style,
2747 style = _props$style === void 0 ? {} : _props$style,
2748 rest = _objectWithoutPropertiesLoose(props, ["as", "aria-label", "aria-describedby", "isReadOnly", "style"]);
2749
2750 var inputStyleProps = useInputStyle(props);
2751 var formControl = useFormControl(props);
2752 return React__default.createElement(Box, Object.assign({
2753 ref: ref,
2754 as: as,
2755 _readOnly: formControl.isReadOnly,
2756 "aria-readonly": isReadOnly,
2757 isDisabled: formControl.isDisabled,
2758 "aria-label": ariaLabel,
2759 "aria-invalid": formControl.isInvalid,
2760 isRequired: formControl.isRequired,
2761 "aria-required": formControl.isRequired,
2762 "aria-disabled": formControl.isDisabled,
2763 "aria-describedby": ariaDescribedby,
2764 textStyle: "body.small",
2765 style: _objectSpread2({
2766 WebkitAppearance: 'none'
2767 }, style)
2768 }, inputStyleProps, rest));
2769 });
2770 Input.defaultProps = {
2771 as: 'input',
2772 isFullWidth: true,
2773 focusBorderColor: 'blue.300'
2774 };
2775 Input.displayName = 'Input';
2776
2777 var InputGroup = function InputGroup(_ref) {
2778 var children = _ref.children,
2779 _ref$size = _ref.size,
2780 size = _ref$size === void 0 ? 'default' : _ref$size,
2781 props = _objectWithoutPropertiesLoose(_ref, ["children", "size"]);
2782
2783 var _useTheme = useTheme(),
2784 sizes = _useTheme.sizes;
2785
2786 var height = inputSizes[size] && inputSizes[size].height;
2787 var pl = null;
2788 var pr = null;
2789 return React__default.createElement(Box, Object.assign({
2790 display: "flex",
2791 position: "relative"
2792 }, props), React.Children.map(children, function (child) {
2793 if (!React__default.isValidElement(child)) {
2794 return null;
2795 }
2796
2797 if (child.type === InputLeftElement) {
2798 pl = sizes[height];
2799 }
2800
2801 if (child.type === InputRightElement) {
2802 pr = sizes[height];
2803 }
2804
2805 if (child.type === Input) {
2806 return React.cloneElement(child, {
2807 width: '100%',
2808 pl: child.props.pl || pl,
2809 pr: child.props.pr || pr
2810 });
2811 }
2812
2813 return React.cloneElement(child, {
2814 size: size
2815 });
2816 }));
2817 };
2818
2819 var ModalContext = /*#__PURE__*/React__default.createContext({
2820 isOpen: false
2821 });
2822 var useModalState = function useModalState() {
2823 return React__default.useContext(ModalContext);
2824 };
2825 var Header = /*#__PURE__*/React__default.memo(function (_ref) {
2826 var component = _ref.component;
2827 return component ? React__default.createElement(Box, {
2828 borderTopRightRadius: "6px",
2829 borderTopLeftRadius: "6px"
2830 }, component) : null;
2831 });
2832 var Footer = /*#__PURE__*/React__default.memo(function (_ref2) {
2833 var component = _ref2.component;
2834 return component ? React__default.createElement(Box, {
2835 borderBottomRightRadius: "6px",
2836 borderBottomLeftRadius: "6px"
2837 }, component) : null;
2838 });
2839
2840 var ModalUnderlay = function ModalUnderlay(_ref3) {
2841 var isOpen = _ref3.isOpen,
2842 noAnimation = _ref3.noAnimation;
2843 return React__default.createElement(Box, {
2844 position: "fixed",
2845 size: "100%",
2846 left: 0,
2847 right: 0,
2848 top: 0,
2849 bottom: 0,
2850 bg: "rgba(0,0,0," + (isOpen ? '0.48' : '0') + ")",
2851 transition: noAnimation ? 'unset' : 'all 0.15s',
2852 zIndex: 99999,
2853 style: {
2854 userSelect: isOpen ? 'unset' : 'none',
2855 pointerEvents: isOpen ? 'unset' : 'none',
2856 willChange: 'background'
2857 }
2858 });
2859 };
2860
2861 var ModalWrapper = function ModalWrapper(_ref4) {
2862 var isOpen = _ref4.isOpen,
2863 rest = _objectWithoutPropertiesLoose(_ref4, ["isOpen"]);
2864
2865 return React__default.createElement(Flex, Object.assign({
2866 zIndex: 999999,
2867 position: "fixed",
2868 bottom: [0, 'unset'],
2869 width: "100%",
2870 top: 0,
2871 left: 0,
2872 height: "100%",
2873 maxHeight: ['100vh', 'unset'],
2874 alignItems: "center",
2875 justifyContent: ['flex-end', 'center'],
2876 flexDirection: "column",
2877 opacity: isOpen ? 1 : 0,
2878 style: {
2879 userSelect: isOpen ? 'unset' : 'none',
2880 pointerEvents: isOpen ? 'unset' : 'none'
2881 }
2882 }, rest));
2883 };
2884
2885 var ModalCardContainer = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
2886 var noAnimation = _ref5.noAnimation,
2887 isOpen = _ref5.isOpen,
2888 rest = _objectWithoutPropertiesLoose(_ref5, ["noAnimation", "isOpen"]);
2889
2890 return React__default.createElement(Flex, Object.assign({
2891 flexDirection: "column",
2892 position: "relative",
2893 bg: "white",
2894 mx: "auto",
2895 minWidth: ['100%', '396px'],
2896 maxWidth: ['100%', '396px'],
2897 maxHeight: ['100%', 'calc(100% - 48px)'],
2898 borderRadius: ['unset', '6px'],
2899 boxShadow: "high",
2900 transform: noAnimation ? 'translateY(0px)' : isOpen ? 'translateY(0px)' : 'translateY(15px)',
2901 transition: noAnimation ? 'unset' : 'all 0.2s ease-in-out',
2902 style: {
2903 willChange: 'transform'
2904 },
2905 ref: ref
2906 }, rest));
2907 });
2908 var Modal = /*#__PURE__*/React__default.memo(function (_ref6) {
2909 var _ref6$footerComponent = _ref6.footerComponent,
2910 FooterComponent = _ref6$footerComponent === void 0 ? null : _ref6$footerComponent,
2911 _ref6$headerComponent = _ref6.headerComponent,
2912 HeaderComponent = _ref6$headerComponent === void 0 ? null : _ref6$headerComponent,
2913 _ref6$isOpen = _ref6.isOpen,
2914 isOpen = _ref6$isOpen === void 0 ? false : _ref6$isOpen,
2915 children = _ref6.children,
2916 _ref6$noAnimation = _ref6.noAnimation,
2917 noAnimation = _ref6$noAnimation === void 0 ? false : _ref6$noAnimation,
2918 close = _ref6.close,
2919 props = _objectWithoutPropertiesLoose(_ref6, ["footerComponent", "headerComponent", "isOpen", "children", "noAnimation", "close"]);
2920
2921 var _useModalState = useModalState(),
2922 doCloseModal = _useModalState.doCloseModal;
2923
2924 var ref = React__default.useRef(null);
2925 React__default.useEffect(function () {
2926 var func = function func(event) {
2927 if (event.key === 'Escape') {
2928 if (close) {
2929 close();
2930 } else if (doCloseModal) {
2931 doCloseModal();
2932 }
2933 }
2934 };
2935
2936 if (isOpen) {
2937 var _window, _window$document;
2938
2939 typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : (_window$document = _window.document) === null || _window$document === void 0 ? void 0 : _window$document.createElement) && document.addEventListener('keydown', func);
2940 }
2941
2942 return function () {
2943 var _window2, _window2$document;
2944
2945 typeof window !== 'undefined' && ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$document = _window2.document) === null || _window2$document === void 0 ? void 0 : _window2$document.createElement) && document.removeEventListener('keydown', func);
2946 };
2947 }, [isOpen, close]);
2948 var handler = isOpen ? close || doCloseModal || null : null;
2949 useOnClickOutside(ref, handler);
2950 return React__default.createElement(React__default.Fragment, null, React__default.createElement(ModalUnderlay, {
2951 isOpen: isOpen,
2952 noAnimation: noAnimation
2953 }), React__default.createElement(ModalWrapper, {
2954 isOpen: isOpen
2955 }, React__default.createElement(ModalCardContainer, Object.assign({
2956 ref: ref,
2957 isOpen: isOpen,
2958 noAnimation: noAnimation
2959 }, props), React__default.createElement(Header, {
2960 component: HeaderComponent
2961 }), React__default.createElement(Box, {
2962 overflowY: "auto"
2963 }, children), React__default.createElement(Footer, {
2964 component: FooterComponent
2965 }))));
2966 });
2967 var ModalProvider = function ModalProvider(props) {
2968 var _React$useState = React__default.useState(false),
2969 isOpen = _React$useState[0],
2970 setIsOpen = _React$useState[1];
2971
2972 var doOpenModal = function doOpenModal() {
2973 return !isOpen ? setIsOpen(true) : null;
2974 };
2975
2976 var doCloseModal = function doCloseModal() {
2977 return isOpen ? setIsOpen(false) : null;
2978 };
2979
2980 return React__default.createElement(ModalContext.Provider, {
2981 value: {
2982 isOpen: isOpen,
2983 doOpenModal: doOpenModal,
2984 doCloseModal: doCloseModal
2985 }
2986 }, props.children);
2987 };
2988
2989 var oppositeDirections = {
2990 top: 'bottom',
2991 bottom: 'top',
2992 right: 'left',
2993 left: 'right'
2994 };
2995 var getOppositePosition = function getOppositePosition(position) {
2996 return oppositeDirections[position];
2997 };
2998
2999 var splitPlacement = function splitPlacement(placement) {
3000 return placement.split('-');
3001 };
3002
3003 function getArrowStyles(placement, arrowSize) {
3004 var _ref;
3005
3006 var _splitPlacement = splitPlacement(placement),
3007 position = _splitPlacement[0];
3008
3009 var oppositePosition = getOppositePosition(position);
3010 if (!oppositePosition) return {};
3011 return _ref = {}, _ref[oppositePosition] = "-" + arrowSize / 2 + "px", _ref.width = arrowSize, _ref.height = arrowSize, _ref.position = 'absolute', _ref.transform = 'rotate(45deg)', _ref;
3012 }
3013 var isBrowser$2 = typeof window !== 'undefined';
3014 var useSafeLayoutEffect$1 = isBrowser$2 ? React.useLayoutEffect : React.useEffect;
3015 function usePopper(props) {
3016 var _props$placement = props.placement,
3017 initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
3018 offsetProp = props.offset,
3019 _props$preventOverflo = props.preventOverflow,
3020 preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
3021 _props$fixed = props.fixed,
3022 fixed = _props$fixed === void 0 ? false : _props$fixed,
3023 _props$forceUpdate = props.forceUpdate,
3024 forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
3025 _props$flip = props.flip,
3026 flip = _props$flip === void 0 ? true : _props$flip,
3027 _props$arrowSize = props.arrowSize,
3028 arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
3029 _props$gutter = props.gutter,
3030 gutter = _props$gutter === void 0 ? arrowSize : _props$gutter,
3031 _props$eventsEnabled = props.eventsEnabled,
3032 eventsEnabled = _props$eventsEnabled === void 0 ? true : _props$eventsEnabled;
3033 var popper = React.useRef(null);
3034 var referenceRef = React.useRef(null);
3035 var popoverRef = React.useRef(null);
3036 var arrowRef = React.useRef(null);
3037
3038 var _React$useState = React.useState(initialPlacement),
3039 originalPlacement = _React$useState[0],
3040 place = _React$useState[1];
3041
3042 var _React$useState2 = React.useState(initialPlacement),
3043 placement = _React$useState2[0],
3044 setPlacement = _React$useState2[1];
3045
3046 var _React$useState3 = React.useState(offsetProp || [0, gutter]),
3047 offset = _React$useState3[0];
3048
3049 var _React$useState4 = React.useState({}),
3050 popoverStyles = _React$useState4[0],
3051 setPopoverStyles = _React$useState4[1];
3052
3053 var _React$useState5 = React.useState({}),
3054 arrowStyles = _React$useState5[0],
3055 setArrowStyles = _React$useState5[1];
3056
3057 var update = React.useCallback(function () {
3058 if (popper.current) {
3059 popper.current.forceUpdate();
3060 return true;
3061 }
3062
3063 return false;
3064 }, []);
3065 useSafeLayoutEffect$1(function () {
3066 if (referenceRef.current && popoverRef.current) {
3067 popper.current = core.createPopper(referenceRef.current, popoverRef.current, {
3068 placement: originalPlacement,
3069 strategy: fixed ? 'fixed' : 'absolute',
3070 modifiers: [{
3071 name: 'eventListener',
3072 phase: 'write',
3073 enabled: eventsEnabled
3074 }, {
3075 name: 'applyStyles',
3076 enabled: false
3077 }, {
3078 name: 'flip',
3079 enabled: flip,
3080 options: {
3081 padding: 8
3082 }
3083 }, {
3084 name: 'computeStyles',
3085 options: {
3086 gpuAcceleration: false
3087 }
3088 }, {
3089 name: 'offset',
3090 options: {
3091 offset: offset
3092 }
3093 }, {
3094 name: 'preventOverflow',
3095 enabled: preventOverflow,
3096 options: {
3097 tetherOffset: function tetherOffset() {
3098 var _arrowRef$current;
3099
3100 return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0;
3101 }
3102 }
3103 }, {
3104 name: 'arrow',
3105 enabled: Boolean(arrowRef.current),
3106 options: {
3107 element: arrowRef.current
3108 }
3109 }, {
3110 name: 'updateState',
3111 phase: 'write',
3112 enabled: true,
3113 fn: function fn(_ref2) {
3114 var state = _ref2.state;
3115 setPlacement(state.placement);
3116 setPopoverStyles(state.styles.popper);
3117 setArrowStyles(state.styles.arrow);
3118 }
3119 }]
3120 });
3121 }
3122
3123 return function () {
3124 if (popper.current) {
3125 popper.current.destroy();
3126 popper.current = null;
3127 }
3128 };
3129 }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
3130 useSafeLayoutEffect$1(function () {
3131 requestAnimationFrame(function () {
3132 if (forceUpdate) {
3133 var _popper$current;
3134
3135 (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate();
3136 }
3137 });
3138 }, [forceUpdate]);
3139
3140 var computedArrowStyles = _objectSpread2({}, arrowStyles, {}, getArrowStyles(placement, arrowSize));
3141
3142 return {
3143 popperInstance: popper.current,
3144 reference: {
3145 ref: referenceRef
3146 },
3147 popper: {
3148 ref: popoverRef,
3149 style: popoverStyles
3150 },
3151 arrow: {
3152 ref: arrowRef,
3153 style: computedArrowStyles
3154 },
3155 update: update,
3156 placement: placement,
3157 place: place
3158 };
3159 }
3160
3161 var _createContext = /*#__PURE__*/createContext({
3162 strict: false
3163 }),
3164 usePortalManager = _createContext[1];
3165
3166 var _createContext$1 = /*#__PURE__*/createContext({
3167 strict: false
3168 }),
3169 PortalCtxProvider = _createContext$1[0],
3170 usePortalContext = _createContext$1[1];
3171
3172 function Portal(props) {
3173 var onMount = props.onMount,
3174 onUnmount = props.onUnmount,
3175 children = props.children,
3176 containerProp = props.container;
3177
3178 var _React$useState = React.useState(function () {
3179 if (isBrowser) {
3180 var div = document.createElement('div');
3181 div.className = 'portal';
3182 return div;
3183 }
3184
3185 return null;
3186 }),
3187 portal = _React$useState[0];
3188
3189 var parentPortal = usePortalContext();
3190 var manager = usePortalManager();
3191 var append = React.useCallback(function (container) {
3192 if (!portal || !container) return;
3193 container.appendChild(portal);
3194 }, [portal]);
3195 useSafeLayoutEffect(function () {
3196 var _ref, _ref2;
3197
3198 var mountNode = containerProp === null || containerProp === void 0 ? void 0 : containerProp();
3199 var container = (_ref = (_ref2 = mountNode !== null && mountNode !== void 0 ? mountNode : parentPortal) !== null && _ref2 !== void 0 ? _ref2 : manager === null || manager === void 0 ? void 0 : manager.node) !== null && _ref !== void 0 ? _ref : document.body;
3200 append(container);
3201 onMount === null || onMount === void 0 ? void 0 : onMount();
3202 return function () {
3203 onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
3204 if (!portal) return;
3205
3206 if (container === null || container === void 0 ? void 0 : container.contains(portal)) {
3207 container === null || container === void 0 ? void 0 : container.removeChild(portal);
3208 }
3209 };
3210 }, [containerProp, portal, parentPortal, onMount, onUnmount, manager && manager.node, append]);
3211 var finalChildren = (manager === null || manager === void 0 ? void 0 : manager.zIndex) ? React.createElement("div", {
3212 className: "portal-zIndex",
3213 style: {
3214 zIndex: manager.zIndex
3215 }
3216 }, children) : children;
3217
3218 if (!portal) {
3219 return React.createElement(React.Fragment, null, finalChildren);
3220 }
3221
3222 return reactDom.createPortal(React.createElement(PortalCtxProvider, {
3223 value: portal
3224 }, finalChildren), portal);
3225 }
3226
3227 {
3228 Portal.displayName = 'Portal';
3229 }
3230
3231 var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3232 var isInline = _ref.isInline,
3233 children = _ref.children,
3234 align = _ref.align,
3235 justify = _ref.justify,
3236 _ref$spacing = _ref.spacing,
3237 spacing = _ref$spacing === void 0 ? 2 : _ref$spacing,
3238 shouldWrapChildren = _ref.shouldWrapChildren,
3239 rest = _objectWithoutPropertiesLoose(_ref, ["isInline", "children", "align", "justify", "spacing", "shouldWrapChildren"]);
3240
3241 var validChildren = Array.isArray(children) ? children.filter(React.isValidElement) : [];
3242 return React__default.createElement(Flex, Object.assign({
3243 align: align,
3244 justify: justify,
3245 flexDir: isInline ? 'row' : 'column',
3246 ref: ref
3247 }, rest), React.Children.map(validChildren, function (child, index) {
3248 if (!React.isValidElement(child)) {
3249 return null;
3250 }
3251
3252 if (!Array.isArray(children)) {
3253 return null;
3254 }
3255
3256 var isLastChild = validChildren.length === index + 1;
3257 var spacingProps = isInline ? {
3258 mr: isLastChild ? undefined : spacing
3259 } : {
3260 mb: isLastChild ? undefined : spacing
3261 };
3262
3263 if (shouldWrapChildren) {
3264 return React__default.createElement(Box, Object.assign({
3265 d: "inline-block"
3266 }, spacingProps), child);
3267 }
3268
3269 return React.cloneElement(child, spacingProps);
3270 }));
3271 });
3272 Stack.displayName = 'Stack';
3273
3274 var Transition = function Transition(_ref) {
3275 var styles = _ref.styles,
3276 inProp = _ref["in"],
3277 _ref$timeout = _ref.timeout,
3278 timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
3279 _ref$transition = _ref.transition,
3280 transition = _ref$transition === void 0 ? "all " + timeout + "ms cubic-bezier(0.23, 1, 0.32, 1)" : _ref$transition,
3281 children = _ref.children,
3282 rest = _objectWithoutPropertiesLoose(_ref, ["styles", "in", "timeout", "transition", "children"]);
3283
3284 var computedStyle = function computedStyle(state) {
3285 return _objectSpread2({}, styles.init, {
3286 transition: transition
3287 }, styles[state]);
3288 };
3289
3290 return React.createElement(CSSTransition, Object.assign({
3291 appear: true,
3292 unmountOnExit: true,
3293 "in": inProp,
3294 timeout: timeout
3295 }, rest), function (state) {
3296 return children(computedStyle(state));
3297 });
3298 };
3299
3300 var styles = {
3301 init: {
3302 opacity: 0
3303 },
3304 entered: {
3305 opacity: 1
3306 },
3307 exiting: {
3308 opacity: 0
3309 }
3310 };
3311 var Fade = function Fade(_ref) {
3312 var _ref$timeout = _ref.timeout,
3313 timeout = _ref$timeout === void 0 ? 250 : _ref$timeout,
3314 rest = _objectWithoutPropertiesLoose(_ref, ["timeout"]);
3315
3316 return React.createElement(Transition, Object.assign({
3317 transition: "all " + timeout + "ms cubic-bezier(0.175, 0.885, 0.320, 1.175)",
3318 styles: styles,
3319 timeout: {
3320 enter: 50,
3321 exit: timeout
3322 }
3323 }, rest));
3324 };
3325
3326 var getTransitionStyles = function getTransitionStyles(initialScale) {
3327 return {
3328 init: {
3329 opacity: 0,
3330 transform: "scale(" + initialScale + ")"
3331 },
3332 entered: {
3333 opacity: 1,
3334 transform: 'scale(1)'
3335 },
3336 exiting: {
3337 opacity: 0,
3338 transform: "scale(" + initialScale + ")"
3339 }
3340 };
3341 };
3342
3343 var ScaleFade = function ScaleFade(_ref) {
3344 var _ref$initialScale = _ref.initialScale,
3345 initialScale = _ref$initialScale === void 0 ? 0.9 : _ref$initialScale,
3346 _ref$timeout = _ref.timeout,
3347 timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
3348 rest = _objectWithoutPropertiesLoose(_ref, ["initialScale", "timeout"]);
3349
3350 return React.createElement(Transition, Object.assign({
3351 styles: React.useMemo(function () {
3352 return getTransitionStyles(initialScale);
3353 }, [initialScale]),
3354 transition: "all " + timeout + "ms cubic-bezier(0.45, 0, 0.40, 1)",
3355 timeout: {
3356 enter: 50,
3357 exit: timeout
3358 },
3359 unmountOnExit: true
3360 }, rest));
3361 };
3362
3363 var createBaseStyle = function createBaseStyle(placement) {
3364 switch (placement) {
3365 case 'bottom':
3366 {
3367 return {
3368 maxWidth: '100vw',
3369 bottom: 0,
3370 left: 0,
3371 right: 0
3372 };
3373 }
3374
3375 case 'top':
3376 {
3377 return {
3378 maxWidth: '100vw',
3379 top: 0,
3380 left: 0,
3381 right: 0
3382 };
3383 }
3384
3385 case 'left':
3386 {
3387 return {
3388 width: '100%',
3389 height: '100vh',
3390 left: 0,
3391 top: 0
3392 };
3393 }
3394
3395 case 'right':
3396 {
3397 return {
3398 width: '100%',
3399 right: 0,
3400 top: 0,
3401 height: '100vh'
3402 };
3403 }
3404
3405 default:
3406 return undefined;
3407 }
3408 };
3409
3410 var getTransformStyle = function getTransformStyle(placement, value) {
3411 var axis = '';
3412 if (placement === 'left' || placement === 'right') axis = 'X';
3413 if (placement === 'top' || placement === 'bottom') axis = 'Y';
3414 return "translate" + axis + "(" + value + ")";
3415 };
3416
3417 var getTransitionStyles$1 = function getTransitionStyles(placement) {
3418 var offset = {
3419 bottom: '100%',
3420 top: '-100%',
3421 left: '-100%',
3422 right: '100%'
3423 };
3424 return {
3425 init: {
3426 transform: getTransformStyle(placement, offset[placement])
3427 },
3428 entered: {
3429 transform: getTransformStyle(placement, '0%')
3430 },
3431 exiting: {
3432 transform: getTransformStyle(placement, offset[placement])
3433 }
3434 };
3435 };
3436
3437 function Slide(props) {
3438 var _props$placement = props.placement,
3439 placement = _props$placement === void 0 ? 'left' : _props$placement,
3440 _props$timeout = props.timeout,
3441 timeout = _props$timeout === void 0 ? 250 : _props$timeout,
3442 children = props.children,
3443 rest = _objectWithoutPropertiesLoose(props, ["placement", "timeout", "children"]);
3444
3445 var styles = getTransitionStyles$1(placement);
3446
3447 var positionStyles = _objectSpread2({
3448 position: 'fixed',
3449 willChange: 'transform'
3450 }, createBaseStyle(placement));
3451
3452 return React.createElement(Transition, Object.assign({
3453 styles: styles,
3454 transition: "all " + timeout + "ms cubic-bezier(0, 0, 0.2, 1)",
3455 timeout: {
3456 enter: 50,
3457 exit: timeout
3458 }
3459 }, rest), function (styles) {
3460 return children(_objectSpread2({}, positionStyles, {}, styles));
3461 });
3462 }
3463
3464 function getTransitionStyles$2(initialOffset) {
3465 return {
3466 init: {
3467 opacity: 0,
3468 transform: "translateY(" + initialOffset + ")"
3469 },
3470 entered: {
3471 opacity: 1,
3472 transform: 'translateY(0px)'
3473 },
3474 exiting: {
3475 opacity: 0,
3476 transform: "translateY(" + initialOffset + ")"
3477 }
3478 };
3479 }
3480
3481 var SlideFade = function SlideFade(props) {
3482 var _props$initialOffset = props.initialOffset,
3483 initialOffset = _props$initialOffset === void 0 ? '20px' : _props$initialOffset,
3484 _props$timeout = props.timeout,
3485 timeout = _props$timeout === void 0 ? 150 : _props$timeout,
3486 rest = _objectWithoutPropertiesLoose(props, ["initialOffset", "timeout"]);
3487
3488 var styles = getTransitionStyles$2(initialOffset);
3489 return React.createElement(Transition, Object.assign({
3490 styles: styles,
3491 transition: "all " + timeout + "ms cubic-bezier(0.4, 0.14, 0.3, 1)",
3492 timeout: {
3493 enter: 50,
3494 exit: timeout
3495 }
3496 }, rest));
3497 };
3498
3499 var toneToIcon = {
3500 critical: ExclamationMarkCircleIcon,
3501 positive: CheckmarkCircleIcon,
3502 none: function none() {
3503 return null;
3504 }
3505 };
3506
3507 var Action = function Action(_ref) {
3508 var label = _ref.label,
3509 onClick = _ref.onClick,
3510 removeToast = _ref.removeToast,
3511 rest = _objectWithoutPropertiesLoose(_ref, ["label", "onClick", "removeToast"]);
3512
3513 var handleClick = React.useCallback(function () {
3514 removeToast();
3515 onClick();
3516 }, [removeToast, onClick]);
3517 return React__default.createElement(Box, Object.assign({
3518 _hover: {
3519 cursor: 'pointer',
3520 textDecoration: 'underline'
3521 },
3522 onClick: handleClick,
3523 "aria-hidden": true
3524 }, rest), React__default.createElement(Text, null, label));
3525 };
3526
3527 var getCustomProps = function getCustomProps(props) {
3528 var _props, _props2, _props3, _props4, _props5, _props5$icon, _props6, _props7;
3529
3530 if (props === void 0) {
3531 props = {};
3532 }
3533
3534 return {
3535 message: _objectSpread2({
3536 color: 'ink'
3537 }, (_props = props) === null || _props === void 0 ? void 0 : _props.message),
3538 description: _objectSpread2({
3539 color: 'ink.600'
3540 }, (_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.description),
3541 toast: _objectSpread2({
3542 background: 'white',
3543 borderColor: 'inherit',
3544 boxShadow: 'high'
3545 }, (_props3 = props) === null || _props3 === void 0 ? void 0 : _props3.toast),
3546 icon: _objectSpread2({}, (_props4 = props) === null || _props4 === void 0 ? void 0 : _props4.icon, {
3547 color: _objectSpread2({
3548 critical: 'red',
3549 positive: 'green'
3550 }, (_props5 = props) === null || _props5 === void 0 ? void 0 : (_props5$icon = _props5.icon) === null || _props5$icon === void 0 ? void 0 : _props5$icon.color)
3551 }),
3552 close: _objectSpread2({
3553 color: 'ink.600'
3554 }, (_props6 = props) === null || _props6 === void 0 ? void 0 : _props6.close),
3555 action: _objectSpread2({
3556 color: 'blue',
3557 fontSize: '14px'
3558 }, (_props7 = props) === null || _props7 === void 0 ? void 0 : _props7.action)
3559 };
3560 };
3561
3562 var CloseButton = function CloseButton(_ref2) {
3563 var onClick = _ref2.onClick,
3564 rest = _objectWithoutPropertiesLoose(_ref2, ["onClick"]);
3565
3566 var _useHover = useEvents.useHover(),
3567 hover = _useHover[0],
3568 bind = _useHover[1];
3569
3570 var _useFocus = useEvents.useFocus(),
3571 focus = _useFocus[0],
3572 focusBind = _useFocus[1];
3573
3574 return React__default.createElement(Flex, Object.assign({
3575 position: "relative",
3576 justify: "center",
3577 cursor: hover ? 'pointer' : 'unset',
3578 onClick: onClick
3579 }, bind, rest), React__default.createElement(Box, Object.assign({
3580 ml: "tight",
3581 mt: "extra-tight",
3582 opacity: hover ? 1 : 0.5,
3583 as: "button",
3584 role: "button",
3585 "aria-label": "Close popup",
3586 title: "Close",
3587 style: {
3588 outline: 'none'
3589 },
3590 position: "relative",
3591 zIndex: 99,
3592 transition: transition
3593 }, focusBind), React__default.createElement(CloseIcon, {
3594 size: "12px"
3595 })), React__default.createElement(Box, {
3596 size: "24px",
3597 bg: "currentColor",
3598 borderRadius: "100%",
3599 position: "absolute",
3600 left: "-50%",
3601 top: "-50%",
3602 opacity: hover ? 0.1 : 0,
3603 transform: "translate3d(12px, 6px, 0)",
3604 transition: transition,
3605 boxShadow: focus ? 'focus' : 'unset'
3606 }));
3607 };
3608
3609 var Description = function Description(_ref3) {
3610 var children = _ref3.children,
3611 rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
3612
3613 return React__default.createElement(Text, Object.assign({
3614 fontSize: "14px",
3615 style: {
3616 wordBreak: 'break-word'
3617 },
3618 display: "block"
3619 }, rest), children);
3620 };
3621
3622 var Message = function Message(_ref4) {
3623 var children = _ref4.children,
3624 rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
3625
3626 return React__default.createElement(Text, Object.assign({
3627 fontWeight: "600",
3628 display: "block"
3629 }, rest), children);
3630 };
3631
3632 var ToastContent = function ToastContent(_ref5) {
3633 var _ref5$styles = _ref5.styles,
3634 styles = _ref5$styles === void 0 ? {} : _ref5$styles,
3635 message = _ref5.message,
3636 description = _ref5.description,
3637 action = _ref5.action,
3638 remove = _ref5.remove,
3639 rest = _objectWithoutPropertiesLoose(_ref5, ["styles", "message", "description", "action", "remove"]);
3640
3641 return description ? React__default.createElement(Stack, Object.assign({
3642 spacing: "tight"
3643 }, rest), React__default.createElement(Message, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.message), message), description ? React__default.createElement(Description, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.description), description) : null, action ? React__default.createElement(Action, Object.assign({
3644 key: action.label,
3645 removeToast: remove
3646 }, action, styles.action)) : null) : React__default.createElement(Stack, Object.assign({
3647 spacing: "tight"
3648 }, rest), React__default.createElement(Message, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.message), message), action ? React__default.createElement(Action, Object.assign({
3649 key: action.label,
3650 removeToast: remove
3651 }, action, styles.action)) : null);
3652 };
3653
3654 var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
3655 var _rect$height;
3656
3657 var propsId = _ref6.id,
3658 message = _ref6.message,
3659 description = _ref6.description,
3660 _ref6$tone = _ref6.tone,
3661 tone = _ref6$tone === void 0 ? 'none' : _ref6$tone,
3662 onClear = _ref6.onClear,
3663 action = _ref6.action,
3664 _ref6$toastProps = _ref6.toastProps,
3665 toastProps = _ref6$toastProps === void 0 ? {} : _ref6$toastProps;
3666 var id = autoId.useId(propsId);
3667 var styles = React.useMemo(function () {
3668 return getCustomProps(toastProps);
3669 }, [toastProps]);
3670 var remove = React.useCallback(function () {
3671 return onClear(id);
3672 }, [onClear, id]);
3673 var toastRef = React.useRef(null);
3674 var rect$1 = rect.useRect(toastRef);
3675
3676 var _React$useState = React__default.useState(true),
3677 show = _React$useState[0],
3678 setShow = _React$useState[1];
3679
3680 var height = (_rect$height = rect$1 === null || rect$1 === void 0 ? void 0 : rect$1.height) !== null && _rect$height !== void 0 ? _rect$height : 0;
3681
3682 var onExit = function onExit() {
3683 if (!show) {
3684 onClear(id);
3685 }
3686 };
3687
3688 var onClose = React__default.useCallback(function () {
3689 setShow(false);
3690 }, []);
3691
3692 var _useTimeout = useTimeout({
3693 duration: 7200,
3694 onTimeout: onClose
3695 }),
3696 stopTimeout = _useTimeout.stopTimeout,
3697 startTimeout = _useTimeout.startTimeout;
3698
3699 var animationStyles = {
3700 init: {
3701 opacity: 0,
3702 height: 0,
3703 transform: 'scale(1)'
3704 },
3705 entered: {
3706 opacity: 1,
3707 height: height,
3708 transform: 'scale(1)'
3709 },
3710 exiting: {
3711 opacity: 0,
3712 height: 0,
3713 transform: 'scale(0.9)'
3714 }
3715 };
3716 var noIcon = tone === 'none';
3717 var Icon = toneToIcon[tone];
3718 return React__default.createElement(Transition, {
3719 styles: animationStyles,
3720 "in": show,
3721 onExited: onExit,
3722 timeout: 350
3723 }, function (transitionStyles) {
3724 return React__default.createElement(Box, {
3725 onMouseEnter: stopTimeout,
3726 onMouseLeave: startTimeout,
3727 style: _objectSpread2({
3728 willChange: 'transform, height, opacity'
3729 }, transitionStyles),
3730 ref: ref
3731 }, React__default.createElement(Flex, {
3732 justify: "center",
3733 as: ReachAlert,
3734 maxWidth: "100%",
3735 pb: "tight",
3736 px: "tight",
3737 ref: toastRef
3738 }, React__default.createElement(Box, Object.assign({
3739 p: "base",
3740 border: "1px solid",
3741 borderColor: "inherit",
3742 borderRadius: "6px",
3743 maxWidth: "100%"
3744 }, styles.toast, {
3745 style: {
3746 pointerEvents: 'all'
3747 }
3748 }), React__default.createElement(Box, {
3749 position: "relative"
3750 }, React__default.createElement(Flex, {
3751 align: "flex-start"
3752 }, tone !== 'none' ? React__default.createElement(Box, Object.assign({
3753 pt: "extra-tight",
3754 pr: "tight"
3755 }, styles === null || styles === void 0 ? void 0 : styles.icon, {
3756 color: styles.icon.color[tone]
3757 }), React__default.createElement(Icon, {
3758 size: "16px"
3759 })) : null, React__default.createElement(Box, {
3760 pr: noIcon ? 'unset' : 'base'
3761 }, React__default.createElement(ToastContent, {
3762 message: message,
3763 description: description,
3764 action: action,
3765 styles: styles,
3766 remove: remove
3767 })), React__default.createElement(CloseButton, {
3768 onClick: onClose
3769 }))))));
3770 });
3771 });
3772
3773 var Toaster = function Toaster(_ref) {
3774 var toasts = _ref.toasts,
3775 removeToast = _ref.removeToast,
3776 rest = _objectWithoutPropertiesLoose(_ref, ["toasts", "removeToast"]);
3777
3778 var onClear = React.useCallback(function (id) {
3779 removeToast(id);
3780 }, [removeToast]);
3781 return React__default.createElement(Flex, Object.assign({
3782 align: "center",
3783 justify: "flex-end",
3784 flexDirection: "column",
3785 position: "fixed",
3786 width: "100%",
3787 height: "100vh",
3788 bottom: 0,
3789 zIndex: 9999999,
3790 style: {
3791 pointerEvents: 'none'
3792 }
3793 }, rest), toasts.map(function (_ref2) {
3794 var id = _ref2.id,
3795 rest = _objectWithoutPropertiesLoose(_ref2, ["id"]);
3796
3797 return React__default.createElement(Box, {
3798 key: id
3799 }, React__default.createElement(Toast, Object.assign({
3800 id: id,
3801 onClear: onClear
3802 }, rest)));
3803 }));
3804 };
3805
3806 var toastCounter = 0;
3807 var ToastControllerContext = /*#__PURE__*/React.createContext(null);
3808 var QUEUE_TOAST = 0;
3809 var REMOVE_TOAST = 1;
3810
3811 function reducer(state, action) {
3812 switch (action.type) {
3813 case QUEUE_TOAST:
3814 {
3815 return _objectSpread2({}, state, {
3816 toasts: [].concat(state.toasts, [action.payload])
3817 });
3818 }
3819
3820 case REMOVE_TOAST:
3821 {
3822 var toasts = state.toasts.filter(function (_ref) {
3823 var id = _ref.id;
3824 return id !== action.payload;
3825 });
3826 return _objectSpread2({}, state, {
3827 toasts: toasts
3828 });
3829 }
3830 }
3831
3832 return state;
3833 }
3834
3835 var InternalToastProvider = function InternalToastProvider(_ref2) {
3836 var children = _ref2.children;
3837
3838 var _useReducer = React.useReducer(reducer, {
3839 toasts: []
3840 }),
3841 toasts = _useReducer[0].toasts,
3842 dispatch = _useReducer[1];
3843
3844 var addToast = React.useCallback(function (props) {
3845 return dispatch({
3846 type: QUEUE_TOAST,
3847 payload: props
3848 });
3849 }, []);
3850 var removeToast = React.useCallback(function (id) {
3851 return dispatch({
3852 type: REMOVE_TOAST,
3853 payload: id
3854 });
3855 }, []);
3856 return React__default.createElement(ToastControllerContext.Provider, {
3857 value: addToast
3858 }, children, React__default.createElement(Portal, null, React__default.createElement(Toaster, {
3859 toasts: toasts,
3860 removeToast: removeToast
3861 })));
3862 };
3863
3864 var ToastProvider = function ToastProvider(_ref3) {
3865 var children = _ref3.children;
3866 var currentContext = React.useContext(ToastControllerContext);
3867
3868 if (currentContext !== null) {
3869 return React__default.createElement(React__default.Fragment, null, children);
3870 }
3871
3872 return React__default.createElement(InternalToastProvider, null, children);
3873 };
3874 var useToast = function useToast() {
3875 var addToast = React.useContext(ToastControllerContext);
3876
3877 if (addToast === null) {
3878 throw new Error('No "ToastProvider" configured');
3879 }
3880
3881 return React.useCallback(function (props) {
3882 return addToast(_objectSpread2({}, props, {
3883 id: "" + toastCounter++
3884 }));
3885 }, [addToast]);
3886 };
3887
3888 var hideOperation;
3889 var activeId = null;
3890
3891 function show(fn, delay) {
3892 var _hideOperation;
3893
3894 var isHidePending = (_hideOperation = hideOperation) === null || _hideOperation === void 0 ? void 0 : _hideOperation.pending();
3895
3896 if (isHidePending) {
3897 hideOperation.flush();
3898 }
3899
3900 var showOperation = flushable(function () {
3901 return fn(isHidePending);
3902 }, isHidePending ? 0 : delay);
3903 return showOperation.cancel;
3904 }
3905
3906 function hide(fn, delay) {
3907 hideOperation = flushable(function (flushed) {
3908 return fn(flushed);
3909 }, delay);
3910 return hideOperation.cancel;
3911 }
3912
3913 function useTooltip(props) {
3914 if (props === void 0) {
3915 props = {};
3916 }
3917
3918 var _props = props,
3919 _props$showDelay = _props.showDelay,
3920 showDelay = _props$showDelay === void 0 ? 200 : _props$showDelay,
3921 _props$hideDelay = _props.hideDelay,
3922 hideDelay = _props$hideDelay === void 0 ? 200 : _props$hideDelay,
3923 _props$hideOnClick = _props.hideOnClick,
3924 hideOnClick = _props$hideOnClick === void 0 ? false : _props$hideOnClick,
3925 onShow = _props.onShow,
3926 onHide = _props.onHide,
3927 hideOnMouseDown = _props.hideOnMouseDown,
3928 placement = _props.placement,
3929 id = _props.id,
3930 isOpenProp = _props.isOpen,
3931 defaultIsOpen = _props.defaultIsOpen,
3932 _props$arrowSize = _props.arrowSize,
3933 arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
3934 _label = _props.label;
3935
3936 var _React$useState = React.useState(_label),
3937 label = _React$useState[0],
3938 setLabel = _React$useState[1];
3939
3940 var labelIsUpToDate = _label === label;
3941 if (!labelIsUpToDate) setLabel(_label);
3942
3943 var _useDisclosure = useDisclosure({
3944 isOpen: isOpenProp,
3945 defaultIsOpen: defaultIsOpen,
3946 onOpen: onShow,
3947 onClose: onHide
3948 }),
3949 isOpen = _useDisclosure.isOpen,
3950 open = _useDisclosure.onOpen,
3951 close = _useDisclosure.onClose;
3952
3953 var popper = usePopper({
3954 forceUpdate: isOpen && labelIsUpToDate,
3955 placement: placement,
3956 arrowSize: arrowSize
3957 });
3958 var tooltipId = useId(id, 'tooltip');
3959 var ref = React.useRef(null);
3960 var triggerRef = useMergeRefs(ref, popper.reference.ref);
3961 var flushRef = React.useRef();
3962 React.useEffect(function () {
3963 return function () {
3964 var _flushRef$current;
3965
3966 return (_flushRef$current = flushRef.current) === null || _flushRef$current === void 0 ? void 0 : _flushRef$current.call(flushRef);
3967 };
3968 }, []);
3969 var hideImmediately = React.useCallback(function () {
3970 var _flushRef$current2;
3971
3972 (_flushRef$current2 = flushRef.current) === null || _flushRef$current2 === void 0 ? void 0 : _flushRef$current2.call(flushRef);
3973 close();
3974 }, [close]);
3975 var onClick = React.useCallback(function () {
3976 if (hideOnClick) {
3977 hideImmediately();
3978 }
3979 }, [hideOnClick, hideImmediately]);
3980 var onMouseDown = React.useCallback(function () {
3981 if (hideOnMouseDown) {
3982 hideImmediately();
3983 }
3984 }, [hideOnMouseDown, hideImmediately]);
3985 var showTooltip = React.useCallback(function () {
3986 var _flushRef$current3;
3987
3988 (_flushRef$current3 = flushRef.current) === null || _flushRef$current3 === void 0 ? void 0 : _flushRef$current3.call(flushRef);
3989
3990 if (tooltipId !== activeId) {
3991 hideImmediately();
3992 }
3993
3994 activeId = tooltipId;
3995
3996 if (!isOpen) {
3997 flushRef.current = show(function () {
3998 open();
3999 }, showDelay);
4000 }
4001 }, [isOpen, showDelay, open, tooltipId, hideImmediately]);
4002 var hideTooltip = React.useCallback(function () {
4003 var _flushRef$current4;
4004
4005 (_flushRef$current4 = flushRef.current) === null || _flushRef$current4 === void 0 ? void 0 : _flushRef$current4.call(flushRef);
4006 activeId = null;
4007
4008 if (isOpen) {
4009 flushRef.current = hide(function () {
4010 close();
4011 }, hideDelay);
4012 }
4013 }, [isOpen, hideDelay, close]);
4014 var onMouseOver = React.useCallback(function (event) {
4015 var isSelf = event.target === ref.current;
4016
4017 if (isOpen && isSelf) {
4018 return;
4019 }
4020
4021 showTooltip();
4022 }, [isOpen, showTooltip]);
4023 var onKeyDown = React.useCallback(function (event) {
4024 if (isOpen && event.key === 'Escape') {
4025 hideImmediately();
4026 }
4027 }, [isOpen, hideImmediately]);
4028 useEventListener('keydown', onKeyDown);
4029 return {
4030 isOpen: isOpen,
4031 show: open,
4032 hide: close,
4033 placement: popper.placement,
4034 getTriggerProps: function getTriggerProps(props) {
4035 if (props === void 0) {
4036 props = {};
4037 }
4038
4039 return _objectSpread2({}, props, {
4040 ref: mergeRefs(props.ref, triggerRef),
4041 onMouseOut: callAllHandlers(props.onMouseOut, hideTooltip),
4042 onMouseOver: callAllHandlers(props.onMouseOver, onMouseOver),
4043 onClick: callAllHandlers(props.onClick, onClick),
4044 onMouseDown: callAllHandlers(props.onMouseDown, onMouseDown),
4045 onFocus: callAllHandlers(props.onFocus, showTooltip),
4046 onBlur: callAllHandlers(props.onBlur, hideTooltip),
4047 'aria-describedby': isOpen ? tooltipId : undefined
4048 });
4049 },
4050 getTooltipProps: function getTooltipProps(props) {
4051 if (props === void 0) {
4052 props = {};
4053 }
4054
4055 return _objectSpread2({}, props, {
4056 id: tooltipId,
4057 role: 'tooltip',
4058 ref: mergeRefs(props.ref, popper.popper.ref),
4059 style: _objectSpread2({}, props.style, {}, popper.popper.style)
4060 });
4061 },
4062 getArrowProps: function getArrowProps(props) {
4063 if (props === void 0) {
4064 props = {};
4065 }
4066
4067 return _objectSpread2({}, props, {
4068 ref: mergeRefs(props.ref, popper.arrow.ref),
4069 style: _objectSpread2({}, props.style, {}, popper.arrow.style)
4070 });
4071 }
4072 };
4073 }
4074
4075 function Tooltip(props) {
4076 var children = props.children,
4077 label = props.label,
4078 shouldWrapChildren = props.shouldWrapChildren,
4079 ariaLabel = props['aria-label'],
4080 hasArrow = props.hasArrow,
4081 rest = _objectWithoutPropertiesLoose(props, ["children", "label", "shouldWrapChildren", "aria-label", "hasArrow"]);
4082
4083 if (!label || label === '') {
4084 var child = React.Children.only(children);
4085 return React.cloneElement(child, _objectSpread2({}, child.props, {}, rest));
4086 }
4087
4088 var _useTooltip = useTooltip(props),
4089 isOpen = _useTooltip.isOpen,
4090 getTriggerProps = _useTooltip.getTriggerProps,
4091 getTooltipProps = _useTooltip.getTooltipProps,
4092 getArrowProps = _useTooltip.getArrowProps;
4093
4094 var trigger;
4095
4096 if (isString(children) || shouldWrapChildren) {
4097 trigger = React.createElement(Box, Object.assign({
4098 as: "span",
4099 tabIndex: 0
4100 }, getTriggerProps()), children);
4101 } else {
4102 var _child = React.Children.only(children);
4103
4104 trigger = React.cloneElement(_child, getTriggerProps(_child.props));
4105 }
4106
4107 var hasAriaLabel = Boolean(ariaLabel);
4108 var baseTooltipProps = getTooltipProps(rest);
4109
4110 var _ref = hasAriaLabel ? omit(baseTooltipProps, ['role', 'id']) : baseTooltipProps,
4111 style = _ref.style,
4112 tooltipProps = _objectWithoutPropertiesLoose(_ref, ["style"]);
4113
4114 var hiddenProps = pick(baseTooltipProps, ['role', 'id']);
4115 return React.createElement(React.Fragment, null, trigger, isOpen && React.createElement(Portal, null, React.createElement(Box, Object.assign({
4116 paddingX: "8px",
4117 paddingY: "tight",
4118 bg: "ink",
4119 color: "white",
4120 borderRadius: "6px",
4121 textStyle: "caption.medium",
4122 maxWidth: "320px"
4123 }, tooltipProps, {
4124 style: _objectSpread2({}, style, {
4125 useSelect: 'none'
4126 })
4127 }), label, hasAriaLabel && React.createElement(VisuallyHidden, Object.assign({}, hiddenProps), ariaLabel), hasArrow && React.createElement(Box, Object.assign({
4128 "data-arrow": "",
4129 bg: "inherit"
4130 }, getArrowProps())))));
4131 }
4132
4133 var copyToClipboard = function copyToClipboard(value) {
4134 var el = document.createElement('textarea');
4135 el.value = value;
4136 el.setAttribute('readonly', '');
4137 el.style.position = 'absolute';
4138 el.style.left = '-9999px';
4139 document.body.appendChild(el);
4140 var curSelection = document.getSelection();
4141 var selected = curSelection && curSelection.rangeCount > 0 ? curSelection.getRangeAt(0) : false;
4142 el.select();
4143 document.execCommand('copy');
4144 document.body.removeChild(el);
4145
4146 if (selected) {
4147 var _document$getSelectio, _document$getSelectio2;
4148
4149 (_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 ? void 0 : _document$getSelectio.removeAllRanges();
4150 (_document$getSelectio2 = document.getSelection()) === null || _document$getSelectio2 === void 0 ? void 0 : _document$getSelectio2.addRange(selected);
4151 }
4152 };
4153
4154 function useClipboard(value) {
4155 var _useState = React.useState(false),
4156 hasCopied = _useState[0],
4157 setHasCopied = _useState[1];
4158
4159 var onCopy = function onCopy() {
4160 copyToClipboard(value);
4161 setHasCopied(true);
4162 setTimeout(function () {
4163 return setHasCopied(false);
4164 }, 1500);
4165 };
4166
4167 return {
4168 value: value,
4169 onCopy: onCopy,
4170 hasCopied: hasCopied
4171 };
4172 }
4173
4174 var nativeExceptions = /*#__PURE__*/[EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError].filter(function (except) {
4175 return typeof except === 'function';
4176 });
4177
4178 function throwNative(error) {
4179 for (var _iterator = _createForOfIteratorHelperLoose(nativeExceptions), _step; !(_step = _iterator()).done;) {
4180 var Exception = _step.value;
4181 if (error instanceof Exception) throw error;
4182 }
4183 }
4184
4185 function safeAwait(promise, finallyFn) {
4186 return promise.then(function (data) {
4187 if (data instanceof Error) {
4188 throwNative(data);
4189 return [data];
4190 }
4191
4192 return [undefined, data];
4193 })["catch"](function (error) {
4194 throwNative(error);
4195 return [error];
4196 })["finally"](function () {
4197 if (finallyFn) finallyFn();
4198 });
4199 }
4200
4201 exports.AppsIcon = AppsIcon;
4202 exports.ArrowIcon = ArrowIcon;
4203 exports.BlockchainIcon = BlockchainIcon;
4204 exports.BlockstackIcon = BlockstackIcon;
4205 exports.Box = Box;
4206 exports.Button = Button;
4207 exports.ButtonGroup = ButtonGroup;
4208 exports.CSSReset = CSSReset;
4209 exports.CheckmarkCircleIcon = CheckmarkCircleIcon;
4210 exports.CheckmarkIcon = CheckmarkIcon;
4211 exports.ChevronIcon = ChevronIcon;
4212 exports.CloseIcon = CloseIcon;
4213 exports.CodeBlock = CodeBlock;
4214 exports.ColorModeContext = ColorModeContext;
4215 exports.ColorModeProvider = ColorModeProvider;
4216 exports.ColorModes = ColorModes;
4217 exports.ConnectLogoIcon = ConnectLogoIcon;
4218 exports.EncryptionIcon = EncryptionIcon;
4219 exports.ExclamationMarkCircleIcon = ExclamationMarkCircleIcon;
4220 exports.ExclamationMarkIcon = ExclamationMarkIcon;
4221 exports.ExternalIcon = ExternalIcon;
4222 exports.EyeIcon = EyeIcon;
4223 exports.Fade = Fade;
4224 exports.FailedIcon = FailedIcon;
4225 exports.Flex = Flex;
4226 exports.FormControl = FormControl;
4227 exports.FormLabel = FormLabel;
4228 exports.Grid = Grid;
4229 exports.Highlighter = Highlighter;
4230 exports.Input = Input;
4231 exports.InputAddon = InputAddon;
4232 exports.InputElement = InputElement;
4233 exports.InputGroup = InputGroup;
4234 exports.InputLeftAddon = InputLeftAddon;
4235 exports.InputLeftElement = InputLeftElement;
4236 exports.InputRightAddon = InputRightAddon;
4237 exports.InputRightElement = InputRightElement;
4238 exports.Modal = Modal;
4239 exports.ModalProvider = ModalProvider;
4240 exports.PadlockIcon = PadlockIcon;
4241 exports.PlusCircleIcon = PlusCircleIcon;
4242 exports.Portal = Portal;
4243 exports.PrivateIcon = PrivateIcon;
4244 exports.PseudoBox = Box;
4245 exports.RequiredIndicator = RequiredIndicator;
4246 exports.ScaleFade = ScaleFade;
4247 exports.ScopedCSSReset = ScopedCSSReset;
4248 exports.Slide = Slide;
4249 exports.SlideFade = SlideFade;
4250 exports.Spinner = Spinner;
4251 exports.Stack = Stack;
4252 exports.StyledBox = StyledBox;
4253 exports.Svg = Svg;
4254 exports.Text = Text;
4255 exports.ThemeContext = ThemeContext;
4256 exports.ThemeProvider = ThemeProvider;
4257 exports.Toast = Toast;
4258 exports.ToastProvider = ToastProvider;
4259 exports.Toaster = Toaster;
4260 exports.Tooltip = Tooltip;
4261 exports.Transition = Transition;
4262 exports.UnionLineIcon = UnionLineIcon;
4263 exports.VisuallyHidden = VisuallyHidden;
4264 exports.addBlack = addBlack;
4265 exports.addOpacity = addOpacity;
4266 exports.addWhite = addWhite;
4267 exports.assignRef = assignRef$1;
4268 exports.baseSizes = baseSizes;
4269 exports.color = color;
4270 exports.colorEmphasis = colorEmphasis;
4271 exports.colorGet = colorGet;
4272 exports.generateAlphaColors = generateAlphaColors;
4273 exports.generateCssVariables = generateCssVariables;
4274 exports.generateStripe = generateStripe;
4275 exports.get = get;
4276 exports.getArrowStyles = getArrowStyles;
4277 exports.getOppositePosition = getOppositePosition;
4278 exports.isDarkColor = isDarkColor;
4279 exports.namedSpacingUnits = namedSpacingUnits;
4280 exports.safeAwait = safeAwait;
4281 exports.shadows = shadows;
4282 exports.sizes = sizes;
4283 exports.space = space;
4284 exports.systemProps = systemProps;
4285 exports.textStyles = textStyles;
4286 exports.theme = theme;
4287 exports.themeColor = themeColor;
4288 exports.transition = transition;
4289 exports.useClipboard = useClipboard;
4290 exports.useColorMode = useColorMode;
4291 exports.useControllableProp = useControllableProp;
4292 exports.useControllableState = useControllableState;
4293 exports.useDisclosure = useDisclosure;
4294 exports.useEventListener = useEventListener;
4295 exports.useForceUpdate = useForceUpdate;
4296 exports.useFormControl = useFormControl;
4297 exports.useFormControlContext = useFormControlContext;
4298 exports.useId = useId;
4299 exports.useIds = useIds;
4300 exports.useLatestRef = useLatestRef;
4301 exports.useMergeRefs = useMergeRefs;
4302 exports.useModalState = useModalState;
4303 exports.usePopper = usePopper;
4304 exports.usePrevious = usePrevious;
4305 exports.useSafeLayoutEffect = useSafeLayoutEffect;
4306 exports.useTheme = useTheme;
4307 exports.useTimeout = useTimeout;
4308 exports.useToast = useToast;
4309
4310 Object.defineProperty(exports, '__esModule', { value: true });
4311
4312})));
4313//# sourceMappingURL=ui.umd.development.js.map