UNPKG

@blockstack/ui/dist/ui.umd.development.js

Version:
149 kBJavaScriptView Raw
1(function (global, factory) {
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('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')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@styled-system/should-forward-prop', 'styled-components', '@styled-system/css', 'styled-system', 'use-events', '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) :
(global = global || self, factory(global['@blockstack/ui'] = {}, global.React, global.shouldForwardProp, global.styled, global.css, global.styledSystem, global.useEvents, 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, Highlight, autoId, Color, themeGet, propTypes, useOnClickOutside, core, reactDom, ReachAlert, rect, CSSTransition, flushable) { 'use strict';
6
var React__default = 'default' in React ? React['default'] : React;
var styled__default = 'default' in styled ? styled['default'] : styled;
css = css && Object.prototype.hasOwnProperty.call(css, 'default') ? css['default'] : css;
Highlight = Highlight && Object.prototype.hasOwnProperty.call(Highlight, 'default') ? Highlight['default'] : Highlight;
Color = Color && Object.prototype.hasOwnProperty.call(Color, 'default') ? Color['default'] : Color;
useOnClickOutside = useOnClickOutside && Object.prototype.hasOwnProperty.call(useOnClickOutside, 'default') ? useOnClickOutside['default'] : useOnClickOutside;
ReachAlert = ReachAlert && Object.prototype.hasOwnProperty.call(ReachAlert, 'default') ? ReachAlert['default'] : ReachAlert;
CSSTransition = CSSTransition && Object.prototype.hasOwnProperty.call(CSSTransition, 'default') ? CSSTransition['default'] : CSSTransition;
flushable = flushable && Object.prototype.hasOwnProperty.call(flushable, 'default') ? flushable['default'] : flushable;
16
function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
28
  return obj;
}
31
function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
34
  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }
42
  return keys;
}
45
function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
49
    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }
62
  return target;
}
65
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
71
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }
77
  return target;
}
80
function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }
85
  strings.raw = raw;
  return strings;
}
89
function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
98
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
101
  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
103
  return arr2;
}
106
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
  var it;
109
  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
      if (it) o = it;
      var i = 0;
      return function () {
        if (i >= o.length) return {
          done: true
        };
        return {
          done: false,
          value: o[i++]
        };
      };
    }
124
    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
  it = o[Symbol.iterator]();
  return it.next.bind(it);
}
131
var config = {
  roundedTop: {
    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
    scale: 'radii'
  },
  roundedBottom: {
    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
    scale: 'radii'
  },
  roundedLeft: {
    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
    scale: 'radii'
  },
  roundedRight: {
    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
    scale: 'radii'
  },
  roundedTopRight: {
    property: 'borderTopRightRadius',
    scale: 'radii'
  },
  roundedTopLeft: {
    property: 'borderTopLeftRadius',
    scale: 'radii'
  },
  roundedBottomRight: {
    property: 'borderBottomRightRadius',
    scale: 'radii'
  },
  roundedBottomLeft: {
    property: 'borderBottomLeftRadius',
    scale: 'radii'
  },
  rounded: {
    property: 'borderRadius',
    scale: 'radii'
  },
  d: {
    property: 'display'
  },
  w: {
    property: 'width',
    scale: 'sizes'
  },
  minW: {
    property: 'minWidth',
    scale: 'sizes'
  },
  maxW: {
    property: 'maxWidth',
    scale: 'sizes'
  },
  h: {
    property: 'height',
    scale: 'sizes'
  },
  minH: {
    property: 'minHeight',
    scale: 'sizes'
  },
  maxH: {
    property: 'maxHeight',
    scale: 'sizes'
  },
  bgImg: {
    property: 'backgroundImage'
  },
  bgSize: {
    property: 'backgroundSize'
  },
  bgPos: {
    property: 'backgroundPosition'
  },
  bgRepeat: {
    property: 'backgroundRepeat'
  },
  pos: {
    property: 'position'
  },
  flexDir: {
    property: 'flexDirection'
  },
  shadow: {
    property: 'boxShadow',
    scale: 'shadows'
  },
  textDecoration: true,
  overflowX: true,
  overflowY: true,
  textTransform: true,
  animation: true,
  appearance: true,
  transform: true,
  transformOrigin: true,
  visibility: true,
  whiteSpace: true,
  userSelect: true,
  pointerEvents: true,
  wordBreak: true,
  overflowWrap: true,
  textOverflow: true,
  boxSizing: true,
  cursor: true,
  resize: true,
  transition: true,
  listStyleType: true,
  listStylePosition: true,
  listStyleImage: true,
  fill: {
    property: 'fill',
    scale: 'colors'
  },
  stroke: {
    property: 'stroke',
    scale: 'colors'
  },
  objectFit: true,
  objectPosition: true,
  backgroundAttachment: true,
  outline: true
};
config.bgAttachment = config.backgroundAttachment;
config.textDecor = config.textDecoration;
config.listStylePos = config.listStylePosition;
config.listStyleImg = config.listStyleImage;
var extraConfig = /*#__PURE__*/styledSystem.system(config);
258
var transformAlias = function transformAlias(prop, propValue) {
  var configKeys = Object.keys(config);
  var result = {};
262
  if (configKeys.includes(prop)) {
    var _config$prop = config[prop],
        properties = _config$prop.properties,
        property = _config$prop.property;
267
    if (properties) {
      properties.forEach(function (_cssProp) {
        return result[_cssProp] = propValue;
      });
    }
273
    if (property) {
      result[property] = propValue;
    }
277
    if (config[prop] === true) {
      result[prop] = propValue;
    }
  } else {
    result[prop] = propValue;
  }
284
  return result;
};
287
var transformAliasProps = function transformAliasProps(props) {
  var result = {};
290
  for (var prop in props) {
    if (typeof props[prop] === 'object' && !Array.isArray(props[prop])) {
      var _objectSpread2$1;
294
      result = _objectSpread2({}, result, (_objectSpread2$1 = {}, _objectSpread2$1[prop] = transformAliasProps(props[prop]), _objectSpread2$1));
    } else {
      result = _objectSpread2({}, result, {}, transformAlias(prop, props[prop]));
    }
  }
300
  return result;
};
var extraProps = /*#__PURE__*/Object.keys(config);
304
function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n"]);
307
  _templateObject = function _templateObject() {
    return data;
  };
311
  return data;
}
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);
315
var _shouldForwardProp = /*#__PURE__*/shouldForwardProp.createShouldForwardProp( /*#__PURE__*/[].concat(shouldForwardProp.props, extraProps));
317
var StyledBox = /*#__PURE__*/styled__default('div').withConfig({
  shouldForwardProp: function shouldForwardProp(prop) {
    return _shouldForwardProp(prop);
  }
})( /*#__PURE__*/_templateObject(), systemProps, extraConfig);
var hover = '&:hover';
var active = '&:active, &[data-active=true]';
var focus = '&:focus';
var visited = '&:visited';
var even = '&:nth-of-type(even)';
var odd = '&:nth-of-type(odd)';
var disabled = '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover';
var checked = '&[aria-checked=true]';
var mixed = '&[aria-checked=mixed]';
var selected = '&[aria-selected=true]';
var invalid = '&[aria-invalid=true]';
var pressed = '&[aria-pressed=true]';
var readOnly = '&[aria-readonly=true], &[readonly]';
var first = '&:first-of-type';
var last = '&:last-of-type';
var expanded = '&[aria-expanded=true]';
var grabbed = '&[aria-grabbed=true]';
var notFirst = '&:not(:first-of-type)';
var notLast = '&:not(:last-of-type)';
var groupHover = '[role=group]:hover &';
var BoxWithPseudoStyles = /*#__PURE__*/styled__default(StyledBox)(function (_ref) {
  var _css;
345
  var _after = _ref._after,
      _focus = _ref._focus,
      _selected = _ref._selected,
      _focusWithin = _ref._focusWithin,
      _hover = _ref._hover,
      _invalid = _ref._invalid,
      _active = _ref._active,
      _disabled = _ref._disabled,
      _grabbed = _ref._grabbed,
      _pressed = _ref._pressed,
      _expanded = _ref._expanded,
      _visited = _ref._visited,
      _before = _ref._before,
      _readOnly = _ref._readOnly,
      _first = _ref._first,
      _notFirst = _ref._notFirst,
      _notLast = _ref._notLast,
      _last = _ref._last,
      _placeholder = _ref._placeholder,
      _checked = _ref._checked,
      _groupHover = _ref._groupHover,
      _mixed = _ref._mixed,
      _odd = _ref._odd,
      _even = _ref._even;
  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));
});
var Box = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return React__default.createElement(BoxWithPseudoStyles, Object.assign({
    ref: ref
  }, props));
});
Box.displayName = 'Box';
378
var ButtonGroup = function ButtonGroup(_ref) {
  var size = _ref.size,
      variantColor = _ref.variantColor,
      variant = _ref.variant,
      isAttached = _ref.isAttached,
      _ref$spacing = _ref.spacing,
      spacing = _ref$spacing === void 0 ? 2 : _ref$spacing,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["size", "variantColor", "variant", "isAttached", "spacing", "children"]);
388
  var clones = React.Children.map(children, function (child, index) {
    var isFirst = index === 0;
    var isLast = index === React.Children.count(children) - 1;
392
    if (!React__default.isValidElement(child)) {
      return null;
    }
396
    return React.cloneElement(child, _objectSpread2({
      size: size || child.props.size,
      variantColor: child.props.variantColor || variantColor,
      variant: child.props.variant || variant,
      _focus: {
        boxShadow: 'outline',
        zIndex: 1
      }
    }, !isLast && !isAttached && {
      mr: spacing
    }, {}, isFirst && isAttached && {
      roundedRight: 0
    }, {}, isLast && isAttached && {
      roundedLeft: 0
    }, {}, !isFirst && !isLast && isAttached && {
      rounded: 0
    }));
  });
  return React__default.createElement(Box, Object.assign({
    display: "inline-block"
  }, rest), clones);
};
419
ButtonGroup.displayName = 'ButtonGroup';
421
var colors = {
  transparent: 'transparent',
  current: 'currentColor',
  black: '#000000',
  white: '#ffffff',
  blue: /*#__PURE__*/Object.assign('#3700ff', {
    100: '#F2F2FF',
    200: '#E3E5FF',
    300: '#C5CCFF',
    400: '#AAB3FF',
    900: '#5548ff',
    hover: '#3100DC'
  }),
  ink: /*#__PURE__*/Object.assign('#0f1117', {
    50: '#f4f4f5',
    100: '#F9F9FC',
    150: '#F4F4F5',
    200: '#E7E7E8',
    250: '#C8C8CC',
    300: '#C8C8CC',
    400: '#A7A7AD',
    600: '#677282',
    900: '#222933'
  }),
  darken: {
    50: 'rgba(15, 17, 23, 0.05)',
    100: 'rgba(15, 17, 23, 0.1)',
    150: 'rgba(15, 17, 23, 0.15)'
  },
  red: '#de0014',
  green: '#00a73e',
  orange: '#f7aa00',
  cyan: '#00d4ff',
  feedback: {}
};
colors.feedback = {
  error: colors.red,
  success: colors.green,
  warning: colors.orange,
  info: colors.cyan
};
463
var containers = {
  'screen-sm': '640px',
  'screen-md': '768px',
  'screen-lg': '1024px',
  'screen-xl': '1280px'
};
var baseSizes = {
  '0': '0px',
  px: '1px',
  '1': '4px',
  '2': '8px',
  '3': '12px',
  '4': '16px',
  '5': '20px',
  '6': '24px',
  '8': '32px',
  '10': '40px',
  '12': '48px',
  '16': '64px',
  '20': '80px',
  '24': '96px',
  '32': '128px',
  '40': '160px',
  '48': '192px',
  '56': '224px',
  '64': '256px'
};
var namedSpacingUnits = {
  none: baseSizes[0],
  'extra-tight': baseSizes[1],
  tight: baseSizes[2],
  'base-tight': baseSizes[3],
  base: baseSizes[4],
  'base-loose': baseSizes[5],
  loose: baseSizes[6],
  'extra-loose': baseSizes[8]
};
var space = function space(spacing) {
  return spacing;
};
var sizes = /*#__PURE__*/_objectSpread2({}, baseSizes, {
  containers: containers
}, namedSpacingUnits);
507
var typography = {
  letterSpacings: {
    tighter: '-0.02em',
    tight: '-0.01em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em'
  },
  lineHeights: {
    normal: 'normal',
    none: '1',
    shorter: '1.333',
    "short": '1.4',
    base: '1.5',
    tall: '1.625',
    taller: '2'
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900
  },
  fonts: {
    heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
  },
  fontSizes: [12, 14, 16, 20, 24, 28, 32, 36, 48, 64, 96, 128]
};
var displayLarge = {
  fontWeight: typography.fontWeights.semibold,
  fontSize: typography.fontSizes[4],
  lineHeight: typography.lineHeights.shorter,
  letterSpacing: '-0.02em'
};
var displaySmall = {
  fontWeight: typography.fontWeights.medium,
  fontSize: typography.fontSizes[3],
  lineHeight: typography.lineHeights["short"],
  letterSpacing: '-0.02em'
};
var bodyLarge = {
  fontWeight: typography.fontWeights.normal,
  fontSize: typography.fontSizes[2],
  lineHeight: typography.lineHeights.base,
  letterSpacing: '-0.01em'
};
562
var bodyLargeMedium = /*#__PURE__*/_objectSpread2({}, bodyLarge, {
  fontWeight: typography.fontWeights.medium
});
566
var bodySmall = {
  fontWeight: typography.fontWeights.normal,
  fontSize: typography.fontSizes[1],
  lineHeight: typography.lineHeights["short"],
  letterSpacing: '-0.01em'
};
573
var bodySmallMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});
577
var caption = {
  fontSize: typography.fontSizes[0],
  lineHeight: typography.lineHeights.shorter,
  letterSpacing: '0.00em'
};
583
var captionMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});
587
var textStyles = {
  display: {
    large: displayLarge,
    small: displaySmall
  },
  body: {
    large: /*#__PURE__*/_objectSpread2({}, bodyLarge, {
      medium: bodyLargeMedium
    }),
    small: /*#__PURE__*/_objectSpread2({}, bodySmall, {
      medium: bodySmallMedium
    })
  },
  caption: /*#__PURE__*/_objectSpread2({}, caption, {
    medium: captionMedium
  })
};
var typography$1 = /*#__PURE__*/_objectSpread2({}, typography, {
  textStyles: textStyles
});
608
var space$1 = sizes;
var shadows = {
  low: '0px 1px 2px rgba(0, 0, 0, 0.04)',
  mid: '0px 1px 2px rgba(27, 39, 51, 0.04), 0px 4px 8px rgba(27, 39, 51, 0.04)',
  high: '0px 8px 16px rgba(27, 39, 51, 0.08)',
  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
  none: 'none',
  focus: '0 0 0 3px rgba(170, 179, 255, 0.75)',
  'button.secondary': '0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.08)'
};
var breakpoints = ['30em', '48em', '62em', '80em'];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
var zIndices = {
  hide: -1,
  auto: 'auto',
  '0': 0,
  '10': 10,
  '20': 20,
  '30': 30,
  '40': 40,
  '50': 50,
  '60': 60,
  '70': 70,
  '80': 80
};
var radii = {
  none: '0',
  sm: '0.125rem',
  md: '0.25rem',
  lg: '0.5rem',
  full: '9999px'
};
var opacity = {
  '0': '0',
  '20%': '0.2',
  '40%': '0.4',
  '60%': '0.6',
  '80%': '0.8',
  '100%': '1'
};
var borders = {
  none: 0,
  '1px': '1px solid',
  '2px': '2px solid',
  '4px': '4px solid'
};
658
var theme = /*#__PURE__*/_objectSpread2({
  breakpoints: breakpoints,
  zIndices: zIndices,
  radii: radii,
  opacity: opacity,
  borders: borders,
  colors: colors
}, typography$1, {
  sizes: sizes,
  shadows: shadows,
  space: space$1
});
671
var transition = 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)';
673
var baseProps = {
  display: 'inline-flex',
  appearance: 'none',
  alignItems: 'center',
  justifyContent: 'center',
  transition: 'all 250ms',
  userSelect: 'none',
  position: 'relative',
  whiteSpace: 'nowrap',
  verticalAlign: 'middle',
  lineHeight: 'shorter',
  outline: 'none',
  border: '1px solid',
  borderColor: 'transparent'
};
var sizes$1 = {
  lg: {
    minHeight: 12,
    minWidth: 9 * 14,
    fontSize: '14px !important',
    px: 5
  },
  md: {
    minHeight: 10,
    minWidth: 10,
    fontSize: '14px !important',
    px: 4
  },
  sm: {
    minHeight: 6,
    minWidth: 10,
    fontSize: '11px !important',
    px: 3
  }
};
var unstyledStyle = {
  userSelect: 'inherit',
  bg: 'none',
  border: 0,
  color: 'inherit',
  display: 'inline',
  font: 'inherit',
  lineHeight: 'inherit',
  m: 0,
  p: 0,
  textAlign: 'inherit'
};
721
var linkVariantProps = function linkVariantProps() {
  return {
    p: 0,
    height: 'unset',
    lineHeight: 'normal',
    color: 'blue',
    minWidth: 'unset',
    _hover: {
      color: 'blue.hover',
      textDecoration: 'underline'
    },
    _active: {
      textDecoration: 'underline'
    },
    _focus: {
      textDecoration: 'underline'
    },
    _disabled: {
      color: '#A7A7AD'
    }
  };
};
744
var solidVariantProps = function solidVariantProps(_ref) {
  var mode = _ref.mode,
      customStyles = _ref.customStyles;
  var style = {
    primary: {
      bg: 'blue',
      color: 'white',
      _hover: {
        cursor: 'pointer'
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'blue.200',
        cursor: 'not-allowed'
      }
    },
    secondary: {
      bg: 'blue.100',
      color: 'blue',
      border: '1px solid',
      borderColor: 'blue.300',
      boxShadow: null,
      _hover: {
        cursor: 'pointer',
        bg: 'blue.200'
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'blue.200',
        cursor: 'not-allowed',
        color: 'white',
        border: 'none'
      }
    },
    tertiary: {
      bg: 'white',
      color: 'blue',
      boxShadow: shadows['button.secondary'],
      _hover: {
        cursor: 'pointer',
        bg: 'white',
        boxShadow: shadows['button.secondary']
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'white',
        pointerEvents: 'none',
        cursor: 'not-allowed',
        color: 'blue.300'
      }
    }
  };
806
  if (customStyles) {
    return customStyles[mode];
  }
810
  return style[mode];
};
813
var sizeProps = function sizeProps(_ref2) {
  var size = _ref2.size;
  return sizes$1[size];
};
818
var variantProps = function variantProps(props) {
  switch (props.variant) {
    case 'solid':
      return solidVariantProps(props);
823
    case 'link':
      return linkVariantProps();
826
    case 'unstyled':
      return unstyledStyle;
829
    default:
      return {};
  }
};
834
var useButtonStyle = function useButtonStyle(props) {
  return _objectSpread2({}, baseProps, {}, variantProps(props), {}, sizeProps(props));
};
838
function _templateObject$1() {
  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"]);
841
  _templateObject$1 = function _templateObject() {
    return data;
  };
845
  return data;
}
var VisuallyHidden = /*#__PURE__*/styled__default(Box)( /*#__PURE__*/_templateObject$1());
849
function _templateObject$2() {
  var data = _taggedTemplateLiteralLoose(["\n  animation: ", " ", " linear infinite;\n"]);
852
  _templateObject$2 = function _templateObject() {
    return data;
  };
856
  return data;
}
var spin = /*#__PURE__*/styled.keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
var StyledBox$1 = /*#__PURE__*/styled__default(Box)( /*#__PURE__*/_templateObject$2(), spin, function (props) {
  return props.speed;
});
863
var getSize = function getSize(size) {
  switch (size) {
    case 'xs':
      return '0.75rem';
868
    case 'sm':
      return '1rem';
871
    case 'md':
      return '1.5rem';
874
    case 'lg':
      return '2rem';
877
    case 'xl':
      return '3rem';
880
    default:
      return size;
  }
};
885
var Spinner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'md' : _ref$size,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? 'Loading...' : _ref$label,
      _ref$thickness = _ref.thickness,
      thickness = _ref$thickness === void 0 ? '2px' : _ref$thickness,
      _ref$speed = _ref.speed,
      speed = _ref$speed === void 0 ? '0.85s' : _ref$speed,
      color = _ref.color,
      _ref$emptyColor = _ref.emptyColor,
      emptyColor = _ref$emptyColor === void 0 ? 'transparent' : _ref$emptyColor,
      props = _objectWithoutPropertiesLoose(_ref, ["size", "label", "thickness", "speed", "color", "emptyColor"]);
899
  var _size = getSize(size);
901
  return React__default.createElement(StyledBox$1, Object.assign({
    ref: ref,
    display: "inline-block",
    borderWidth: thickness,
    borderColor: "currentColor",
    borderBottomColor: emptyColor,
    borderLeftColor: emptyColor,
    borderRadius: "100%",
    speed: speed,
    color: color,
    size: _size
  }, props), label && React__default.createElement(VisuallyHidden, null, label));
});
Spinner.displayName = 'Spinner';
916
var HoverChange = function HoverChange(_ref) {
  var isHovered = _ref.isHovered,
      isDisabled = _ref.isDisabled;
  return React__default.createElement(Box, {
    borderRadius: "6px",
    position: "absolute",
    width: "100%",
    height: "100%",
    left: 0,
    top: 0,
    bg: "darken.150",
    opacity: !isDisabled && isHovered ? 1 : 0,
    zIndex: 1,
    transition: "all 250ms"
  });
};
933
var Button = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var isDisabled = _ref2.isDisabled,
      isActive = _ref2.isActive,
      children = _ref2.children,
      Comp = _ref2.as,
      _ref2$mode = _ref2.mode,
      mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
      _ref2$variant = _ref2.variant,
      variant = _ref2$variant === void 0 ? 'solid' : _ref2$variant,
      type = _ref2.type,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 'md' : _ref2$size,
      isLoading = _ref2.isLoading,
      loadingText = _ref2.loadingText,
      customStyles = _ref2.customStyles,
      rest = _objectWithoutPropertiesLoose(_ref2, ["isDisabled", "isActive", "children", "as", "mode", "variant", "type", "size", "isLoading", "loadingText", "customStyles"]);
950
  var styles = useButtonStyle({
    variant: variant,
    mode: mode,
    size: size,
    customStyles: customStyles
  });
957
  var _useHover = useEvents.useHover(),
      hovered = _useHover[0],
      bind = _useHover[1];
961
  return React__default.createElement(Box, Object.assign({
    disabled: isDisabled,
    "aria-disabled": isDisabled,
    ref: ref,
    type: type,
    borderRadius: "6px",
    fontWeight: "medium",
    position: "relative",
    "data-active": isActive ? 'true' : undefined,
    as: Comp || 'button'
  }, rest, styles, bind), React__default.createElement(Box, {
    as: "span",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    zIndex: 5
  }, isLoading && React__default.createElement(Spinner, {
    position: loadingText ? 'relative' : 'absolute',
    mx: !loadingText ? 'auto' : 'unset',
    color: "currentColor",
    size: size === 'sm' ? 'xs' : 'sm'
  }), isLoading ? React__default.createElement(Box, {
    ml: "tight"
  }, loadingText) || React__default.createElement(Box, {
    ml: "tight",
    as: "span",
    opacity: 0
  }, children) : children), mode === 'primary' ? React__default.createElement(HoverChange, {
    isDisabled: isDisabled || false,
    isHovered: hovered
  }) : null);
});
Button.displayName = 'Button';
996
var Flex = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var align = _ref.align,
      justify = _ref.justify,
      wrap = _ref.wrap,
      direction = _ref.direction,
      rest = _objectWithoutPropertiesLoose(_ref, ["align", "justify", "wrap", "direction"]);
1003
  return React__default.createElement(Box, Object.assign({
    ref: ref,
    display: "flex",
    flexDirection: direction,
    alignItems: align,
    justifyContent: justify,
    flexWrap: wrap
  }, rest));
});
Flex.displayName = 'Flex';
1014
var _window = undefined;
1016
try {
  _window = window;
} catch (e) {}
1020
function getWindow(node) {
  var _node$ownerDocument$d, _node$ownerDocument;
1023
  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
function checkIsBrowser() {
  var _window = getWindow();
1029
  return Boolean(typeof _window !== 'undefined' && _window.document && _window.document.createElement);
}
1032
var isBrowser = /*#__PURE__*/checkIsBrowser();
function isFunction(value) {
  return typeof value === 'function';
}
function createContext(options) {
  if (options === void 0) {
    options = {};
  }
1041
  var _options = options,
      _options$strict = _options.strict,
      strict = _options$strict === void 0 ? true : _options$strict,
      _options$errorMessage = _options.errorMessage,
      errorMessage = _options$errorMessage === void 0 ? 'useContext must be inside a Provider with a value' : _options$errorMessage,
      name = _options.name;
  var Context = React__default.createContext(undefined);
  Context.displayName = name;
1050
  function useContext() {
    var context = React__default.useContext(Context);
    if (!context && strict) throw new Error(errorMessage);
    return context;
  }
1056
  return [Context.Provider, useContext, Context];
}
function assignRef(ref, value) {
  if (ref == null) return;
1061
  if (isFunction(ref)) {
    ref(value);
    return;
  }
1066
  try {
    ref.current = value;
  } catch (error) {
    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
  }
}
function mergeRefs() {
  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
    refs[_key] = arguments[_key];
  }
1077
  return function (value) {
    refs.forEach(function (ref) {
      return assignRef(ref, value);
    });
  };
}
var __DEV__ = "development" !== 'production';
function runIfFn(valueOrFn) {
  for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
    args[_key2 - 1] = arguments[_key2];
  }
1089
  return isFunction(valueOrFn) ? valueOrFn.apply(void 0, args) : valueOrFn;
}
function warn(options) {
  if (options.condition && __DEV__) {
    console.warn(options.message);
  }
}
function callAllHandlers() {
  for (var _len3 = arguments.length, fns = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
    fns[_key3] = arguments[_key3];
  }
1101
  return function (event) {
    fns.some(function (fn) {
      fn && fn(event);
      return event && event.defaultPrevented;
    });
  };
}
function isString(value) {
  return Object.prototype.toString.call(value) === '[object String]';
}
function omit(object, keys) {
  var result = {};
1114
  for (var key in object) {
    if (keys.includes(key)) continue;
    result[key] = object[key];
  }
1119
  return result;
}
function pick(object, keys) {
  var result = {};
1124
  for (var _iterator = _createForOfIteratorHelperLoose(keys), _step; !(_step = _iterator()).done;) {
    var key = _step.value;
1127
    if (key in object) {
      result[key] = object[key];
    }
  }
1132
  return result;
}
var startPad = function startPad(n, z, s) {
  if (z === void 0) {
    z = 2;
  }
1139
  if (s === void 0) {
    s = '0';
  }
1143
  return (n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + '';
};
1146
function useControllableProp(propValue, stateValue) {
  var _React$useRef = React.useRef(propValue !== undefined),
      isControlled = _React$useRef.current;
1150
  var value = isControlled && typeof propValue !== 'undefined' ? propValue : stateValue;
  return [isControlled, value];
}
var defaultPropsMap = {
  value: 'value',
  defaultValue: 'defaultValue',
  onChange: 'onChange'
};
function useControllableState(props) {
  var valueProp = props.value,
      defaultValue = props.defaultValue,
      onChange = props.onChange,
      _props$shouldUpdate = props.shouldUpdate,
      shouldUpdate = _props$shouldUpdate === void 0 ? function () {
    return true;
  } : _props$shouldUpdate,
      _props$name = props.name,
      name = _props$name === void 0 ? 'Component' : _props$name,
      _props$propsMap = props.propsMap,
      propsMap = _props$propsMap === void 0 ? defaultPropsMap : _props$propsMap;
1171
  var _React$useState = React.useState(defaultValue),
      valueState = _React$useState[0],
      setValue = _React$useState[1];
1175
  var _React$useRef2 = React.useRef(valueProp !== undefined),
      isControlled = _React$useRef2.current;
1178
  React.useEffect(function () {
    var nextIsControlled = valueProp !== undefined;
    var nextMode = nextIsControlled ? 'a controlled' : 'an uncontrolled';
    var mode = isControlled ? 'a controlled' : 'an uncontrolled';
    warn({
      condition: isControlled !== nextIsControlled,
      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'
    });
  }, [valueProp, isControlled, name]);
1188
  var _React$useRef3 = React.useRef(defaultValue),
      _defaultValue = _React$useRef3.current;
1191
  React.useEffect(function () {
    warn({
      condition: _defaultValue !== defaultValue,
      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 + ".")
    });
  }, [JSON.stringify(defaultValue)]);
  var value = isControlled ? valueProp : valueState;
  var updateValue = React.useCallback(function (next) {
    var nextValue = runIfFn(next, value);
    var shouldUpdateState = shouldUpdate(value, nextValue);
    if (!shouldUpdateState) return;
1203
    if (!isControlled) {
      setValue(next);
    }
1207
    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
  }, [onChange, shouldUpdate, isControlled, value]);
  return [value, updateValue];
}
1212
function usePrevious(value) {
  var valueRef = React.useRef();
  React.useEffect(function () {
    valueRef.current = value;
  }, [value]);
  return valueRef.current;
}
1220
function useDisclosure(props) {
  if (props === void 0) {
    props = {};
  }
1225
  var _props = props,
      onCloseProp = _props.onClose,
      onOpenProp = _props.onOpen;
1229
  var _React$useState = React.useState(props.defaultIsOpen || false),
      isOpenState = _React$useState[0],
      setIsOpen = _React$useState[1];
1233
  var _useControllableProp = useControllableProp(props.isOpen, isOpenState),
      isControlled = _useControllableProp[0],
      isOpen = _useControllableProp[1];
1237
  var prevIsOpen = usePrevious(isOpen);
  var onClose = React.useCallback(function () {
    if (!isControlled) {
      setIsOpen(false);
    }
1243
    if (onCloseProp) {
      onCloseProp();
    }
  }, [isControlled, onCloseProp]);
  var onOpen = React.useCallback(function () {
    if (!isControlled) {
      setIsOpen(true);
    }
1252
    if (onOpenProp) {
      onOpenProp();
    }
  }, [isControlled, onOpenProp]);
  var onToggle = React.useCallback(function () {
    var action = isOpen ? onClose : onOpen;
    action();
  }, [isOpen, onOpen, onClose]);
  return {
    isOpen: Boolean(isOpen),
    prevIsOpen: Boolean(prevIsOpen),
    onOpen: onOpen,
    onClose: onClose,
    onToggle: onToggle,
    isControlled: isControlled
  };
}
1270
function useLatestRef(value) {
  var ref = React.useRef(value);
  React.useEffect(function () {
    ref.current = value;
  }, [value]);
  return ref;
}
1278
function useEventListener(event, handler, doc, options) {
  if (doc === void 0) {
    doc = isBrowser ? document : null;
  }
1283
  var savedHandler = useLatestRef(handler);
  React.useEffect(function () {
    if (!doc) return;
1287
    var listener = function listener(event) {
      savedHandler.current(event);
    };
1291
    doc.addEventListener(event, listener, options);
    return function () {
      doc.removeEventListener(event, listener, options);
    };
  }, [event, doc, options, savedHandler]);
  return function () {
    var _doc;
1299
    (_doc = doc) === null || _doc === void 0 ? void 0 : _doc.removeEventListener(event, savedHandler.current, options);
  };
}
1303
function useForceUpdate() {
  var _React$useState = React.useState(0),
      count = _React$useState[0],
      setCount = _React$useState[1];
1308
  return React.useCallback(function () {
    return setCount(count + 1);
  }, [count]);
}
1313
function generatePrefix(prefix, id) {
  return prefix + "-" + id;
}
1317
function useId(idProp, prefix) {
  var uuid = autoId.useId();
  var id = idProp !== null && idProp !== void 0 ? idProp : uuid;
  return prefix ? generatePrefix(prefix, id) : id;
}
function useIds(idProp) {
  var id = useId(idProp);
1325
  for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    prefixes[_key - 1] = arguments[_key];
  }
1329
  return prefixes.map(function (prefix) {
    return generatePrefix(prefix, id);
  });
}
1334
function assignRef$1(ref, value) {
  if (ref == null) return;
1337
  if (typeof ref === 'function') {
    ref(value);
  } else {
    try {
      ref.current = value;
    } catch (error) {
      throw new Error("Cannot assign value \"" + value + "\" to ref \"" + ref + "\"");
    }
  }
}
function useMergeRefs() {
  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
    refs[_key] = arguments[_key];
  }
1352
  return React.useMemo(function () {
    if (refs.every(function (ref) {
      return ref == null;
    })) {
      return null;
    }
1359
    return function (node) {
      refs.forEach(function (ref) {
        if (ref) assignRef$1(ref, node);
      });
    };
  }, refs);
}
1367
var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
1369
var useTimeout = function useTimeout(_ref) {
  var onTimeout = _ref.onTimeout,
      duration = _ref.duration;
1373
  var _useState = React.useState(true),
      activated = _useState[0],
      setActivated = _useState[1];
1377
  var timeoutRef = React.useRef();
  var stopTimeout = React.useCallback(function () {
    window.clearTimeout(timeoutRef.current);
    setActivated(false);
  }, []);
  React.useEffect(function () {
    if (activated) {
      timeoutRef.current = window.setTimeout(function () {
        onTimeout();
      }, duration);
      return function () {
        stopTimeout();
      };
    }
1392
    return;
  }, [onTimeout, activated, duration, stopTimeout]);
  var startTimeout = React.useCallback(function () {
    setActivated(true);
  }, []);
  return {
    stopTimeout: stopTimeout,
    startTimeout: startTimeout
  };
};
1403
var get = function get(color, hue) {
  return color + "." + hue;
};
var addOpacity = function addOpacity(color, opacity) {
  return Color(color).fade(1 - opacity).rgb().string();
};
var addWhite = function addWhite(color, opacity) {
  return Color(color).mix(Color('#fff'), opacity).hex();
};
var addBlack = function addBlack(color, opacity) {
  return Color(color).mix(Color('#000'), opacity).hex();
};
var isDarkColor = function isDarkColor(color) {
  return Color(color).isDark();
};
var generateAlphaColors = function generateAlphaColors(color) {
  return {
    900: addOpacity(color, 0.92),
    800: addOpacity(color, 0.8),
    700: addOpacity(color, 0.6),
    600: addOpacity(color, 0.48),
    500: addOpacity(color, 0.38),
    400: addOpacity(color, 0.24),
    300: addOpacity(color, 0.16),
    200: addOpacity(color, 0.12),
    100: addOpacity(color, 0.08),
    50: addOpacity(color, 0.04)
  };
};
var colorEmphasis = function colorEmphasis(color, emphasis) {
  switch (emphasis) {
    case 'high':
      return color;
1437
    case 'medium':
      return generateAlphaColors(color)[700];
1440
    case 'low':
      return generateAlphaColors(color)[500];
1443
    case 'lowest':
      return generateAlphaColors(color)[300];
1446
    default:
      return undefined;
  }
};
var generateStripe = function generateStripe(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? '1rem' : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'rgba(255, 255, 255, 0.15)' : _ref$color;
  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
var ThemeContext = /*#__PURE__*/React__default.createContext(theme);
1460
var ThemeProvider = function ThemeProvider(_ref) {
  var _ref$theme = _ref.theme,
      theme$1 = _ref$theme === void 0 ? theme : _ref$theme,
      children = _ref.children;
  return React__default.createElement(styled.ThemeProvider, {
    theme: theme$1
  }, children);
};
1469
var useTheme = function useTheme() {
  var theme = React.useContext(ThemeContext);
1472
  if (theme === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
1476
  return theme;
};
1479
var isBrowser$1 = typeof window !== 'undefined';
1481
var isSupported = function isSupported(api) {
  return isBrowser$1 && api in window;
};
1485
function useMediaQuery(query) {
  var _React$useState = React.useState(function () {
    if (!isSupported('matchMedia')) return false;
    return window.matchMedia(query).matches;
  }),
      matches = _React$useState[0],
      setMatches = _React$useState[1];
1493
  useSafeLayoutEffect(function () {
    if (!isSupported('matchMedia')) return;
    var mediaQueryList = window.matchMedia(query);
1497
    var listener = function listener() {
      return setMatches(mediaQueryList.matches);
    };
1501
    mediaQueryList.addListener(listener);
    listener();
    return function () {
      mediaQueryList.removeListener(listener);
    };
  }, [query]);
  return [matches, setMatches];
}
1510
(function (Color) {
  Color["Accent"] = "accent";
  Color["Bg"] = "bg";
  Color["BgAlt"] = "bg-alt";
  Color["BgLight"] = "bg-light";
  Color["Invert"] = "invert";
  Color["TextHover"] = "text-hover";
  Color["TextTitle"] = "text-title";
  Color["TextCaption"] = "text-caption";
  Color["TextBody"] = "text-body";
  Color["InputPlaceholder"] = "input-placeholder";
  Color["Border"] = "border";
  Color["FeedbackAlert"] = "feedback-alert";
  Color["FeedbackError"] = "feedback-error";
  Color["FeedbackSuccess"] = "feedback-success";
})(exports.Color || (exports.Color = {}));
1527
var colorGet = function colorGet(path, fallback) {
  return themeGet.themeGet('colors.' + path, fallback);
};
1531
var colors$1 = function colors(props) {
  var _light, _dark;
1534
  return {
    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),
    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)
  };
};
1540
var colorModeStyles = function colorModeStyles(props) {
  return colors$1(props)[props.colorMode];
};
1544
var colorMap = function colorMap(props) {
  return Object.keys(colors$1(props)[props.colorMode]);
};
1548
var color = function color(name) {
  return "var(--colors-" + name + ")";
};
var themeColor = function themeColor(name) {
  return name;
};
var generateCssVariables = function generateCssVariables(mode) {
  return function (_ref) {
    var _ref$colorMode = _ref.colorMode,
        colorMode = _ref$colorMode === void 0 ? mode : _ref$colorMode,
        rest = _objectWithoutPropertiesLoose(_ref, ["colorMode"]);
1560
    return colorMap(_objectSpread2({
      colorMode: colorMode
    }, rest)).map(function (key) {
      return "--colors-" + key + ": " + colorModeStyles(_objectSpread2({
        colorMode: colorMode
      }, rest))[key] + ";";
    });
  };
};
1570
function _templateObject$3() {
  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  "]);
1573
  _templateObject$3 = function _templateObject() {
    return data;
  };
1577
  return data;
}
var ColorModes = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject$3(), /*#__PURE__*/generateCssVariables('light'), /*#__PURE__*/generateCssVariables('dark'), /*#__PURE__*/generateCssVariables('light'));
1581
var ColorModeContext = /*#__PURE__*/React__default.createContext({
  colorMode: undefined
});
var ColorModeProvider = function ColorModeProvider(_ref) {
  var colorMode = _ref.colorMode,
      children = _ref.children,
      onChange = _ref.onChange;
1589
  var _React$useState = React__default.useState(colorMode),
      mode = _React$useState[0],
      setMode = _React$useState[1];
1593
  var _useMediaQuery = useMediaQuery('(prefers-color-scheme: dark)'),
      darkmode = _useMediaQuery[0];
1596
  var _useMediaQuery2 = useMediaQuery('(prefers-color-scheme: light)'),
      lightmode = _useMediaQuery2[0];
1599
  React.useEffect(function () {
    if (!mode) {
      setMode(darkmode ? 'dark' : 'light');
    }
  }, [mode, darkmode, lightmode]);
  var setColorMode = React.useCallback(function (mode) {
    setMode(mode);
    onChange && onChange(mode);
  }, [mode]);
  var toggleColorMode = React.useCallback(function () {
    if (mode === 'light') {
      setColorMode('dark');
      return;
    }
1614
    if (mode === 'dark') {
      setColorMode('light');
      return;
    }
1619
    if (!colorMode && darkmode) {
      setColorMode('light');
      return;
    }
1624
    if (!mode && lightmode) {
      setColorMode('dark');
      return;
    }
  }, [mode, lightmode, darkmode]);
  return React__default.createElement(ColorModeContext.Provider, {
    value: {
      colorMode: mode,
      toggleColorMode: toggleColorMode
    }
  }, React__default.createElement(ColorModes, {
    colorMode: mode
  }), children);
};
1639
var useColorMode = function useColorMode() {
  var _useContext = React.useContext(ColorModeContext),
      colorMode = _useContext.colorMode,
      toggleColorMode = _useContext.toggleColorMode;
1644
  return {
    colorMode: colorMode,
    toggleColorMode: toggleColorMode
  };
};
1650
var theme$1 = {
  plain: {
    color: '#fff',
    backgroundColor: 'transparent'
  },
  styles: [{
    types: ['prolog'],
    style: {
      color: 'rgb(0, 0, 128)'
    }
  }, {
    types: ['comment', 'punctuation'],
    style: {
      color: 'rgb(106, 153, 85)'
    }
  }, {
    types: ['builtin', 'tag', 'changed', 'function', 'keyword'],
    style: {
      color: 'rgb(86, 156, 214)'
    }
  }, {
    types: ['number', 'variable', 'inserted'],
    style: {
      color: '#A58FFF'
    }
  }, {
    types: ['operator'],
    style: {
      color: 'rgb(212, 212, 212)'
    }
  }, {
    types: ['constant'],
    style: {
      color: 'rgb(100, 102, 149)'
    }
  }, {
    types: ['attr-name'],
    style: {
      color: 'rgb(156, 220, 254)'
    }
  }, {
    types: ['car'],
    style: {
      color: 'rgb(156, 220, 254)'
    }
  }, {
    types: ['deleted', 'string'],
    style: {
      color: '#FF7B48'
    }
  }, {
    types: ['class-name'],
    style: {
      color: 'rgb(78, 201, 176)'
    }
  }, {
    types: ['char'],
    style: {
      color: '#FF7B48'
    }
  }]
};
1713
var lineNumberWidth = 60;
1715
var getLineNumber = function getLineNumber(n, length) {
  return startPad(n + 1, length.toString().length);
};
1719
var Tokens = function Tokens(_ref) {
  var tokens = _ref.tokens,
      getTokenProps = _ref.getTokenProps,
      showLineNumbers = _ref.showLineNumbers,
      rest = _objectWithoutPropertiesLoose(_ref, ["tokens", "getTokenProps", "showLineNumbers"]);
1725
  var bsTheme = useTheme();
  var pl = "calc(" + (showLineNumbers ? lineNumberWidth : '0') + "px + " + (bsTheme.sizes['base'] || '16px') + ")";
  return React__default.createElement(Box, Object.assign({
    pl: pl,
    pr: "base",
    position: "relative",
    zIndex: 2
  }, rest), tokens.map(function (token, key) {
    return React__default.createElement(Box, Object.assign({
      py: "2px",
      display: "inline-block"
    }, getTokenProps({
      token: token,
      key: key
    })));
  }));
};
1743
var LineNumber = function LineNumber(_ref2) {
  var number = _ref2.number,
      length = _ref2.length,
      rest = _objectWithoutPropertiesLoose(_ref2, ["number", "length"]);
1748
  return React__default.createElement(Flex, Object.assign({
    textAlign: "right",
    pr: "base",
    pl: "base",
    width: lineNumberWidth,
    borderRight: "1px solid",
    borderRightColor: "inherit",
    color: "ink.400",
    flexShrink: 0,
    style: {
      userSelect: 'none'
    },
    position: "absolute",
    left: 0,
    height: "100%",
    align: "baseline",
    justify: "center",
    zIndex: 1
  }, rest), getLineNumber(number, length));
};
1769
var Line = function Line(_ref3) {
  var tokens = _ref3.tokens,
      getTokenProps = _ref3.getTokenProps,
      index = _ref3.index,
      length = _ref3.length,
      showLineNumbers = _ref3.showLineNumbers,
      hideLineHover = _ref3.hideLineHover,
      rest = _objectWithoutPropertiesLoose(_ref3, ["tokens", "getTokenProps", "index", "length", "showLineNumbers", "hideLineHover"]);
1778
  return React__default.createElement(Flex, Object.assign({
    height: "loose",
    align: "baseline",
    borderColor: "ink.900",
    _hover: hideLineHover ? undefined : {
      bg: ['unset', 'unset', 'ink.900'],
      borderColor: ['ink.900', 'ink.900', 'ink.600']
    },
    position: "relative"
  }, rest), showLineNumbers ? React__default.createElement(LineNumber, {
    number: index,
    length: length
  }) : null, React__default.createElement(Tokens, {
    showLineNumbers: showLineNumbers,
    getTokenProps: getTokenProps,
    tokens: tokens
  }));
};
1797
var Lines = function Lines(_ref4) {
  var lines = _ref4.tokens,
      getLineProps = _ref4.getLineProps,
      getTokenProps = _ref4.getTokenProps,
      className = _ref4.className,
      showLineNumbers = _ref4.showLineNumbers,
      hideLineHover = _ref4.hideLineHover;
  return React__default.createElement(Box, {
    display: "block",
    className: className
  }, React__default.createElement(Box, {
    display: "block",
    style: {
      fontFamily: 'Fira Code'
    }
  }, lines.map(function (tokens, i) {
    return React__default.createElement(Line, Object.assign({
      index: i,
      tokens: tokens,
      getTokenProps: getTokenProps,
      length: lines.length + 1,
      showLineNumbers: showLineNumbers,
      hideLineHover: hideLineHover || lines.length < 3
    }, getLineProps({
      line: tokens,
      key: i
    })));
  })));
};
1827
var Highlighter = /*#__PURE__*/React__default.memo(function (_ref5) {
  var code = _ref5.code,
      _ref5$language = _ref5.language,
      language = _ref5$language === void 0 ? 'clarity' : _ref5$language,
      showLineNumbers = _ref5.showLineNumbers,
      hideLineHover = _ref5.hideLineHover,
      Prism = _ref5.Prism;
  return React__default.createElement(Highlight, {
    theme: theme$1,
    code: code,
    language: language,
    Prism: Prism
  }, function (props) {
    return React__default.createElement(Lines, Object.assign({
      showLineNumbers: showLineNumbers,
      hideLineHover: hideLineHover
    }, props));
  });
});
Highlighter.displayName = 'Highlighter';
1848
var CodeBlock = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
  var code = _ref.code,
      showLineNumbers = _ref.showLineNumbers,
      hideLineHover = _ref.hideLineHover,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style,
      language = _ref.language,
      Prism = _ref.Prism,
      rest = _objectWithoutPropertiesLoose(_ref, ["code", "showLineNumbers", "hideLineHover", "style", "language", "Prism"]);
1858
  return React__default.createElement(Box, Object.assign({
    overflowX: "auto",
    bg: "ink",
    borderRadius: [0, 0, '12px'],
    py: "base",
    width: "100%",
    ref: ref,
    style: _objectSpread2({}, style, {
      whiteSpace: 'pre',
      fontFamily: 'Fira Code, Consolata, monospace',
      fontSize: '14px'
    })
  }, rest), React__default.createElement(Highlighter, {
    language: language,
    code: code.toString().trim(),
    showLineNumbers: showLineNumbers,
    hideLineHover: hideLineHover,
    Prism: Prism
  }));
});
1879
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;}"]);
1881
function _templateObject2() {
  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\n  body,\n  div,\n  span {\n    text-align: initial;\n    font-family: ", ";\n  }\n"]);
1884
  _templateObject2 = function _templateObject2() {
    return data;
  };
1888
  return data;
}
1891
function _templateObject$4() {
  var data = _taggedTemplateLiteralLoose(["", ""]);
1894
  _templateObject$4 = function _templateObject() {
    return data;
  };
1898
  return data;
}
1901
var defaultConfig = function defaultConfig(theme) {
  return {
    light: {
      color: theme.colors.ink[900],
      bg: undefined,
      borderColor: '#E5E5EC',
      placeholderColor: theme.colors.ink[400]
    },
    dark: {
      color: 'white',
      bg: theme.colors.ink[900],
      borderColor: theme.colors.ink[600],
      placeholderColor: theme.colors.ink[500]
    }
  };
};
1918
var _defaultConfig$light = /*#__PURE__*/defaultConfig(theme).light,
    color$1 = _defaultConfig$light.color,
    bg = _defaultConfig$light.bg,
    borderColor = _defaultConfig$light.borderColor,
    placeholderColor = _defaultConfig$light.placeholderColor;
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);
var CSSReset = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject$4(), cssReset);
var ScopedCSSReset = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2(), borderColor, placeholderColor, placeholderColor, placeholderColor, theme && theme.fonts && theme.fonts.body);
1927
var FormControlContext = /*#__PURE__*/React.createContext({});
var useFormControlContext = function useFormControlContext() {
  return React.useContext(FormControlContext);
};
var useFormControl = function useFormControl(props) {
  var context = useFormControlContext();
1934
  if (!context) {
    return props;
  }
1938
  var keys = Object.keys(context);
  return keys.reduce(function (acc, prop) {
    acc[prop] = props[prop];
1942
    if (context) {
      if (props[prop] == null) {
        acc[prop] = context[prop];
      }
    }
1948
    return acc;
  }, {});
};
var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var isInvalid = _ref.isInvalid,
      isRequired = _ref.isRequired,
      isDisabled = _ref.isDisabled,
      isReadOnly = _ref.isReadOnly,
      rest = _objectWithoutPropertiesLoose(_ref, ["isInvalid", "isRequired", "isDisabled", "isReadOnly"]);
1958
  var context = {
    isRequired: isRequired,
    isDisabled: isDisabled,
    isInvalid: isInvalid,
    isReadOnly: isReadOnly
  };
  return React__default.createElement(FormControlContext.Provider, {
    value: context
  }, React__default.createElement(Box, Object.assign({
    role: "group",
    ref: ref
  }, rest)));
});
FormControl.displayName = 'FormControl';
1973
var assumeTextStyle = function assumeTextStyle(as) {
  switch (as) {
    case 'h1':
      return 'display.large';
1978
    case 'h2':
      return 'display.small';
1981
    case 'h3':
      return 'body.large.medium';
1984
    default:
      return undefined;
  }
};
1989
var Text = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var textStyle = _ref.textStyle,
      _ref$as = _ref.as,
      as = _ref$as === void 0 ? 'span' : _ref$as,
      rest = _objectWithoutPropertiesLoose(_ref, ["textStyle", "as"]);
1995
  return React__default.createElement(Box, Object.assign({
    ref: ref,
    as: as,
    whiteSpace: "unset",
    display: "inline",
    textStyle: textStyle || assumeTextStyle(as)
  }, rest));
});
Text.displayName = 'Text';
2005
var RequiredIndicator = function RequiredIndicator(props) {
  return React__default.createElement(Box, Object.assign({
    as: "span",
    ml: 1,
    color: "red",
    "aria-hidden": "true",
    children: "*"
  }, props));
};
var FormLabel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var children = _ref.children,
      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
2018
  var formControl = useFormControl(props);
  return React__default.createElement(Text, Object.assign({
    ref: ref,
    pb: "4px",
    opacity: formControl.isDisabled ? 0.4 : 1,
    textAlign: "left",
    verticalAlign: "middle",
    display: "inline-block",
    as: "label",
    textStyle: "body.small.medium"
  }, props), children, formControl.isRequired && React__default.createElement(RequiredIndicator, null));
});
FormLabel.displayName = 'FormLabel';
2032
var Grid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var templateColumns = _ref.templateColumns,
      gap = _ref.gap,
      rowGap = _ref.rowGap,
      columnGap = _ref.columnGap,
      autoFlow = _ref.autoFlow,
      autoRows = _ref.autoRows,
      autoColumns = _ref.autoColumns,
      templateRows = _ref.templateRows,
      templateAreas = _ref.templateAreas,
      area = _ref.area,
      column = _ref.column,
      row = _ref.row,
      props = _objectWithoutPropertiesLoose(_ref, ["templateColumns", "gap", "rowGap", "columnGap", "autoFlow", "autoRows", "autoColumns", "templateRows", "templateAreas", "area", "column", "row"]);
2047
  return React__default.createElement(Box, Object.assign({
    ref: ref,
    display: "grid",
    gridArea: area,
    gridTemplateAreas: templateAreas,
    gridGap: gap,
    gridRowGap: rowGap,
    gridColumnGap: columnGap,
    gridAutoColumns: autoColumns,
    gridColumn: column,
    gridRow: row,
    gridAutoFlow: autoFlow,
    gridAutoRows: autoRows,
    gridTemplateRows: templateRows,
    gridTemplateColumns: templateColumns
  }, props));
});
Grid.displayName = 'Grid';
2066
var Svg = function Svg(_ref) {
  var _ref$width = _ref.width,
      width = _ref$width === void 0 ? '24px' : _ref$width,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? 'auto' : _ref$height,
      _ref$viewBox = _ref.viewBox,
      viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
      _ref$fill = _ref.fill,
      fill = _ref$fill === void 0 ? 'none' : _ref$fill,
      rest = _objectWithoutPropertiesLoose(_ref, ["width", "height", "viewBox", "fill"]);
2077
  return React.createElement(Box, Object.assign({
    as: "svg",
    width: width,
    height: height,
    viewBox: viewBox,
    fill: fill
  }, rest));
};
2086
var AppsIcon = function AppsIcon(props) {
  return React__default.createElement(Svg, Object.assign({}, props), React__default.createElement("rect", {
    y: "1.02686",
    width: "10.0435",
    height: "9.88235",
    rx: "1.75",
    fill: "currentColor"
  }), React__default.createElement("path", {
    opacity: "0.8",
    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",
    fill: "currentColor"
  }), React__default.createElement("rect", {
    opacity: "0.64",
    y: "13.7327",
    width: "10.4348",
    height: "10.2674",
    rx: "5.13369",
    fill: "currentColor"
  }), React__default.createElement("path", {
    opacity: "0.4",
    fillRule: "evenodd",
    clipRule: "evenodd",
    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",
    fill: "currentColor"
  }));
};
2113
var rotate = function rotate(direction) {
  if (direction === void 0) {
    direction = 'up';
  }
2118
  switch (direction) {
    case 'up':
      return 0;
2122
    case 'right':
      return '90';
2125
    case 'down':
      return '180';
2128
    case 'left':
      return '270';
2131
    default:
      throw new Error('`rotate` must receive direction parameter');
  }
};
2136
var ArrowIcon = function ArrowIcon(_ref) {
  var direction = _ref.direction,
      style = _ref.style,
      props = _objectWithoutPropertiesLoose(_ref, ["direction", "style"]);
2141
  return React.createElement(Svg, Object.assign({
    width: "11px",
    height: "14px",
    viewBox: "0 0 11 14",
    style: _objectSpread2({}, style, {
      transform: "rotate(" + rotate(direction) + "deg)"
    })
  }, props), React.createElement("path", {
    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",
    fill: "currentColor"
  }));
};
2154
var BlockchainIcon = function BlockchainIcon(props) {
  var color = props.color || 'currentColor';
  return React.createElement(Svg, Object.assign({}, props), React.createElement("rect", {
    width: "12",
    height: "12",
    rx: "2.25",
    fill: color
  }), React.createElement("rect", {
    opacity: "0.6",
    x: "12",
    y: "12",
    width: "12",
    height: "12",
    rx: "2.25",
    fill: color
  }), React.createElement("rect", {
    opacity: "0.4",
    x: "14.75",
    y: "2.75",
    width: "6.5",
    height: "6.5",
    rx: "1",
    stroke: color,
    strokeWidth: "1.5",
    strokeLinejoin: "round"
  }), React.createElement("rect", {
    opacity: "0.4",
    x: "2.75",
    y: "14.75",
    width: "6.5",
    height: "6.5",
    rx: "1",
    stroke: color,
    strokeWidth: "1.5",
    strokeLinejoin: "round"
  }));
};
2192
var BlockstackIcon = function BlockstackIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "12",
    height: "12",
    viewBox: "0 0 12 12",
    fill: "none"
  }, props), React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    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",
    fill: props.color || 'currentColor'
  }));
};
2206
var CheckmarkIcon = function CheckmarkIcon(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 72 : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
      props = _objectWithoutPropertiesLoose(_ref, ["size", "color"]);
2213
  return React.createElement(Svg, Object.assign({
    width: size,
    height: size,
    fill: "none",
    viewBox: "0 0 72 72"
  }, props), React.createElement("circle", {
    cx: "36",
    cy: "36",
    r: "34.5",
    fill: "#fff",
    stroke: color,
    strokeWidth: "3"
  }), React.createElement("path", {
    stroke: color,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: "3",
    d: "M21 37l10 10 20-22"
  }));
};
2234
var CheckmarkCircleIcon = function CheckmarkCircleIcon(props) {
  return React__default.createElement(Box, Object.assign({}, props), React__default.createElement("svg", {
    width: "100%",
    viewBox: "0 0 16 17",
    fill: "none"
  }, React__default.createElement("path", {
    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",
    fill: "currentColor"
  })));
};
2245
var rotate$1 = function rotate(direction) {
  if (direction === void 0) {
    direction = 'right';
  }
2250
  switch (direction) {
    case 'left':
      return '90';
2254
    case 'up':
      return '180';
2257
    case 'right':
      return '270';
2260
    case 'down':
      return 0;
2263
    default:
      throw new Error('`rotate` must receive direction parameter');
  }
};
2268
var ChevronIcon = function ChevronIcon(_ref) {
  var direction = _ref.direction,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? '16px' : _ref$size,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style,
      props = _objectWithoutPropertiesLoose(_ref, ["direction", "size", "style"]);
2276
  return React.createElement(Svg, Object.assign({
    width: size,
    height: size,
    viewBox: "0 0 16 16",
    style: _objectSpread2({}, style, {
      transform: "rotate(" + rotate$1(direction) + "deg)"
    })
  }, props), React.createElement("path", {
    fill: props.color || 'currentColor',
    d: "M4.7 7.367l3.3 3.3 3.3-3.3-.943-.943L8 8.78 5.643 6.424l-.943.943z"
  }));
};
2289
var ConnectLogoIcon = function ConnectLogoIcon(_ref) {
  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
      props = _objectWithoutPropertiesLoose(_ref, ["color"]);
2294
  return React.createElement(Svg, Object.assign({
    color: color
  }, props), React.createElement("rect", {
    width: "24",
    height: "24",
    rx: "12",
    fill: "currentColor",
    opacity: "0.15"
  }), React.createElement("path", {
    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",
    fill: "currentColor"
  }), React.createElement("rect", {
    x: "10.5",
    y: "11.25",
    width: "3",
    height: "5.25",
    fill: "currentColor"
  }));
};
2314
var EncryptionIcon = function EncryptionIcon(props) {
  return React.createElement(Svg, Object.assign({}, props), React.createElement("path", {
    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",
    fill: "currentColor"
  }));
};
2321
var ExclamationMarkIcon = function ExclamationMarkIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "12",
    height: "12",
    fill: "none",
    viewBox: "0 0 12 12"
  }, props), React.createElement("circle", {
    cx: "6",
    cy: "6",
    r: "6",
    fill: props.color || 'currentColor'
  }), React.createElement("path", {
    fill: "#fff",
    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"
  }));
};
2338
var ExclamationMarkCircleIcon = function ExclamationMarkCircleIcon(props) {
  return React__default.createElement(Box, Object.assign({}, props), React__default.createElement("svg", {
    width: "100%",
    viewBox: "0 0 16 16",
    fill: "none"
  }, React__default.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    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",
    fill: "currentColor"
  })));
};
2351
var EyeIcon = function EyeIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "24",
    height: "20",
    viewBox: "0 0 24 20"
  }, props), React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    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",
    fill: props.color || 'currentColor'
  }), React.createElement("path", {
    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",
    fill: props.color || 'currentColor'
  }));
};
2367
var PadlockIcon = function PadlockIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "64",
    height: "64",
    fill: "none",
    viewBox: "0 0 64 64"
  }, props), React.createElement("path", {
    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",
    fill: "currentColor",
    opacity: "0.15"
  }), React.createElement("path", {
    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",
    fill: "currentColor"
  }));
};
2383
var PlusCircleIcon = function PlusCircleIcon(props) {
  return React.createElement(Svg, Object.assign({}, props), React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "12",
    fill: "currentColor"
  }), React.createElement("g", {
    clipPath: "url(#clip0)"
  }, React.createElement("path", {
    fill: "#fff",
    fillRule: "evenodd",
    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",
    clipRule: "evenodd"
  })), React.createElement("defs", null, React.createElement("clipPath", {
    id: "clip0"
  }, React.createElement("path", {
    fill: "#fff",
    d: "M4 12H16V24H4z",
    transform: "rotate(-45 4 12)"
  }))));
};
2405
var PrivateIcon = function PrivateIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "18",
    height: "24",
    viewBox: "0 0 18 24",
    fill: "none"
  }, props), React.createElement("path", {
    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",
    fill: "currentColor"
  }));
};
2417
var UnionLineIcon = function UnionLineIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "32",
    height: "7",
    fill: "none",
    viewBox: "0 0 32 7"
  }, props), React.createElement("mask", {
    id: "a",
    width: "32",
    height: "7",
    x: "0",
    y: "0",
    fill: "#000",
    maskUnits: "userSpaceOnUse"
  }, React.createElement("path", {
    fill: "#fff",
    d: "M0 0H32V7H0z"
  }), React.createElement("path", {
    fillRule: "evenodd",
    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",
    clipRule: "evenodd"
  })), React.createElement("path", {
    fill: "#677282",
    fillRule: "evenodd",
    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",
    clipRule: "evenodd"
  }), React.createElement("path", {
    fill: "#fff",
    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",
    mask: "url(#a)"
  }));
};
2450
var CloseIcon = function CloseIcon(props) {
  return React__default.createElement(Box, Object.assign({}, props), React__default.createElement(Svg, {
    width: "100%",
    viewBox: "0 0 10 10"
  }, React__default.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    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",
    fill: "currentColor"
  })));
};
2462
var ExternalIcon = function ExternalIcon(props) {
  return React.createElement(Svg, Object.assign({
    width: "8",
    height: "9",
    viewBox: "0 0 8 9",
    fill: "none"
  }, props), React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M1.30849 0H7.04391H7.99975H7.99981V6.6919H7.04391V1.66447L0.707141 8.00185L0 7.29477L6.33818 0.955986H1.30849V0Z",
    fill: "#677282"
  }));
};
2476
var FailedIcon = function FailedIcon(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 64 : _ref$size,
      props = _objectWithoutPropertiesLoose(_ref, ["size"]);
2481
  return React.createElement(Svg, Object.assign({
    width: size,
    height: size,
    viewBox: "0 0 64 64",
    fill: "none"
  }, props), React.createElement("circle", {
    cx: "32",
    cy: "32",
    r: "30",
    stroke: "#D4001A",
    strokeWidth: "4",
    strokeLinecap: "round"
  }), React.createElement("path", {
    d: "M23 41L40.9995 23",
    stroke: "#D4001A",
    strokeWidth: "4",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }), React.createElement("path", {
    d: "M41 41L23.0005 23",
    stroke: "#D4001A",
    strokeWidth: "4",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }));
};
2508
var defaultStyle = {
  height: 12,
  border: '1px solid',
  borderBottomColor: 'inherit',
  borderLeftColor: 'inherit',
  borderRightColor: 'inherit',
  borderTopColor: 'inherit',
  borderColor: 'inherit',
  bg: 'white',
  _hover: {
    borderBottomColor: 'ink.300',
    borderLeftColor: 'ink.300',
    borderRightColor: 'ink.300',
    borderTopColor: 'ink.300',
    borderColor: 'ink.300'
  },
  _disabled: {
    bg: '#f9f9fc',
    cursor: 'not-allowed',
    pointerEvents: 'none'
  },
  _focus: {
    borderBottomColor: 'blue.300',
    borderLeftColor: 'blue.300',
    borderRightColor: 'blue.300',
    borderTopColor: 'blue.300',
    borderColor: 'blue.300',
    boxShadow: '0 0 0 1px rgba(170, 179, 255, 0.75)'
  },
  _invalid: {
    borderBottomColor: 'red',
    borderLeftColor: 'red',
    borderRightColor: 'red',
    borderTopColor: 'red',
    borderColor: 'red'
  }
};
var baseProps$1 = {
  display: 'flex',
  alignItems: 'center',
  position: 'relative',
  transition: 'all 0.2s',
  outline: 'none',
  borderRadius: '6px',
  p: '14px 16px'
};
var inputSizes = {
  "default": {
    fontSize: 'body.small',
    height: '12',
    lineHeight: 'base'
  }
};
2562
var useInputStyle = function useInputStyle(props) {
  return _objectSpread2({
    width: props.isFullWidth ? '100%' : undefined
  }, baseProps$1, {}, defaultStyle);
};
2568
var InputAddon = function InputAddon(_ref) {
  var _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'left' : _ref$placement,
      props = _objectWithoutPropertiesLoose(_ref, ["placement"]);
2573
  var _placement = {
    left: {
      mr: '-1px',
      roundedRight: 0,
      borderRightColor: 'transparent',
      borderLeftWidth: 0
    },
    right: {
      order: 1,
      roundedLeft: 0,
      borderLeftColor: 'transparent',
      borderLeftWidth: 0
    }
  };
2588
  var styleProps = _objectSpread2({}, useInputStyle({
    variant: 'outline'
  }), {
    flex: '0 0 auto',
    whiteSpace: 'nowrap',
    bg: 'white',
    fontSize: 'body.small'
  }, _placement[placement]);
2597
  return React__default.createElement(Box, Object.assign({}, styleProps, props, {
    css: {
      'input:focus + &': {
        zIndex: -1
      }
    }
  }));
};
2606
 InputAddon.propTypes = {
  placement: /*#__PURE__*/propTypes.oneOf(['left', 'right'])
} ;
InputAddon.displayName = 'InputAddon';
2611
var InputLeftAddon = function InputLeftAddon(props) {
  return React__default.createElement(InputAddon, Object.assign({
    placement: "left"
  }, props));
};
2617
var InputRightAddon = function InputRightAddon(props) {
  return React__default.createElement(InputAddon, Object.assign({
    placement: "right"
  }, props));
};
2623
var InputElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _placementProp;
2626
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'default' : _ref$size,
      children = _ref.children,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'left' : _ref$placement,
      _ref$disablePointerEv = _ref.disablePointerEvents,
      disablePointerEvents = _ref$disablePointerEv === void 0 ? false : _ref$disablePointerEv,
      props = _objectWithoutPropertiesLoose(_ref, ["size", "children", "placement", "disablePointerEvents"]);
2635
  var height = inputSizes[size] && inputSizes[size].height;
  var fontSize = inputSizes[size] && inputSizes[size].fontSize;
  var placementProp = (_placementProp = {}, _placementProp[placement] = '0', _placementProp);
  return React__default.createElement(Box, Object.assign({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    height: height,
    width: height,
    fontSize: fontSize,
    top: "0",
    zIndex: 1,
    ref: ref
  }, disablePointerEvents && {
    pointerEvents: 'none'
  }, placementProp, props), children);
});
var InputLeftElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return React__default.createElement(InputElement, Object.assign({
    ref: ref,
    placement: "left"
  }, props));
});
var InputRightElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return React__default.createElement(InputElement, Object.assign({
    ref: ref,
    placement: "right"
  }, props));
});
InputElement.displayName = 'InputElement';
InputLeftElement.displayName = 'InputLeftElement';
InputRightElement.displayName = 'InputRightElement';
2669
var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var as = props.as,
      ariaLabel = props['aria-label'],
      ariaDescribedby = props['aria-describedby'],
      isReadOnly = props.isReadOnly,
      _props$style = props.style,
      style = _props$style === void 0 ? {} : _props$style,
      rest = _objectWithoutPropertiesLoose(props, ["as", "aria-label", "aria-describedby", "isReadOnly", "style"]);
2678
  var inputStyleProps = useInputStyle(props);
  var formControl = useFormControl(props);
  return React__default.createElement(Box, Object.assign({
    ref: ref,
    as: as,
    _readOnly: formControl.isReadOnly,
    "aria-readonly": isReadOnly,
    isDisabled: formControl.isDisabled,
    "aria-label": ariaLabel,
    "aria-invalid": formControl.isInvalid,
    isRequired: formControl.isRequired,
    "aria-required": formControl.isRequired,
    "aria-disabled": formControl.isDisabled,
    "aria-describedby": ariaDescribedby,
    textStyle: "body.small",
    style: _objectSpread2({
      WebkitAppearance: 'none'
    }, style)
  }, inputStyleProps, rest));
});
Input.defaultProps = {
  as: 'input',
  isFullWidth: true,
  focusBorderColor: 'blue.300'
};
Input.displayName = 'Input';
2705
var InputGroup = function InputGroup(_ref) {
  var children = _ref.children,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'default' : _ref$size,
      props = _objectWithoutPropertiesLoose(_ref, ["children", "size"]);
2711
  var _useTheme = useTheme(),
      sizes = _useTheme.sizes;
2714
  var height = inputSizes[size] && inputSizes[size].height;
  var pl = null;
  var pr = null;
  return React__default.createElement(Box, Object.assign({
    display: "flex",
    position: "relative"
  }, props), React.Children.map(children, function (child) {
    if (!React__default.isValidElement(child)) {
      return null;
    }
2725
    if (child.type === InputLeftElement) {
      pl = sizes[height];
    }
2729
    if (child.type === InputRightElement) {
      pr = sizes[height];
    }
2733
    if (child.type === Input) {
      return React.cloneElement(child, {
        width: '100%',
        pl: child.props.pl || pl,
        pr: child.props.pr || pr
      });
    }
2741
    return React.cloneElement(child, {
      size: size
    });
  }));
};
2747
var ModalContext = /*#__PURE__*/React__default.createContext({
  isOpen: false
});
var useModalState = function useModalState() {
  return React__default.useContext(ModalContext);
};
var Header = /*#__PURE__*/React__default.memo(function (_ref) {
  var component = _ref.component;
  return component ? React__default.createElement(Box, {
    borderTopRightRadius: "6px",
    borderTopLeftRadius: "6px"
  }, component) : null;
});
var Footer = /*#__PURE__*/React__default.memo(function (_ref2) {
  var component = _ref2.component;
  return component ? React__default.createElement(Box, {
    borderBottomRightRadius: "6px",
    borderBottomLeftRadius: "6px"
  }, component) : null;
});
2768
var ModalUnderlay = function ModalUnderlay(_ref3) {
  var isOpen = _ref3.isOpen,
      noAnimation = _ref3.noAnimation;
  return React__default.createElement(Box, {
    position: "fixed",
    size: "100%",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    bg: "rgba(0,0,0," + (isOpen ? '0.48' : '0') + ")",
    transition: noAnimation ? 'unset' : 'all 0.15s',
    zIndex: 99999,
    style: {
      userSelect: isOpen ? 'unset' : 'none',
      pointerEvents: isOpen ? 'unset' : 'none',
      willChange: 'background'
    }
  });
};
2789
var ModalWrapper = function ModalWrapper(_ref4) {
  var isOpen = _ref4.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref4, ["isOpen"]);
2793
  return React__default.createElement(Flex, Object.assign({
    zIndex: 999999,
    position: "fixed",
    bottom: [0, 'unset'],
    width: "100%",
    top: 0,
    left: 0,
    height: "100%",
    maxHeight: ['100vh', 'unset'],
    alignItems: "center",
    justifyContent: ['flex-end', 'center'],
    flexDirection: "column",
    opacity: isOpen ? 1 : 0,
    style: {
      userSelect: isOpen ? 'unset' : 'none',
      pointerEvents: isOpen ? 'unset' : 'none'
    }
  }, rest));
};
2813
var ModalCardContainer = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
  var noAnimation = _ref5.noAnimation,
      isOpen = _ref5.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref5, ["noAnimation", "isOpen"]);
2818
  return React__default.createElement(Flex, Object.assign({
    flexDirection: "column",
    position: "relative",
    bg: "white",
    mx: "auto",
    minWidth: ['100%', '396px'],
    maxWidth: ['100%', '396px'],
    maxHeight: ['100%', 'calc(100% - 48px)'],
    borderRadius: ['unset', '6px'],
    boxShadow: "high",
    transform: noAnimation ? 'translateY(0px)' : isOpen ? 'translateY(0px)' : 'translateY(15px)',
    transition: noAnimation ? 'unset' : 'all 0.2s ease-in-out',
    style: {
      willChange: 'transform'
    },
    ref: ref
  }, rest));
});
var Modal = /*#__PURE__*/React__default.memo(function (_ref6) {
  var _ref6$footerComponent = _ref6.footerComponent,
      FooterComponent = _ref6$footerComponent === void 0 ? null : _ref6$footerComponent,
      _ref6$headerComponent = _ref6.headerComponent,
      HeaderComponent = _ref6$headerComponent === void 0 ? null : _ref6$headerComponent,
      _ref6$isOpen = _ref6.isOpen,
      isOpen = _ref6$isOpen === void 0 ? false : _ref6$isOpen,
      children = _ref6.children,
      _ref6$noAnimation = _ref6.noAnimation,
      noAnimation = _ref6$noAnimation === void 0 ? false : _ref6$noAnimation,
      close = _ref6.close,
      props = _objectWithoutPropertiesLoose(_ref6, ["footerComponent", "headerComponent", "isOpen", "children", "noAnimation", "close"]);
2849
  var _useModalState = useModalState(),
      doCloseModal = _useModalState.doCloseModal;
2852
  var ref = React__default.useRef(null);
  React__default.useEffect(function () {
    var func = function func(event) {
      if (event.key === 'Escape') {
        if (close) {
          close();
        } else if (doCloseModal) {
          doCloseModal();
        }
      }
    };
2864
    if (isOpen) {
      var _window, _window$document;
2867
      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);
    }
2870
    return function () {
      var _window2, _window2$document;
2873
      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);
    };
  }, [isOpen, close]);
  var handler = isOpen ? close || doCloseModal || null : null;
  useOnClickOutside(ref, handler);
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ModalUnderlay, {
    isOpen: isOpen,
    noAnimation: noAnimation
  }), React__default.createElement(ModalWrapper, {
    isOpen: isOpen
  }, React__default.createElement(ModalCardContainer, Object.assign({
    ref: ref,
    isOpen: isOpen,
    noAnimation: noAnimation
  }, props), React__default.createElement(Header, {
    component: HeaderComponent
  }), React__default.createElement(Box, {
    overflowY: "auto"
  }, children), React__default.createElement(Footer, {
    component: FooterComponent
  }))));
});
var ModalProvider = function ModalProvider(props) {
  var _React$useState = React__default.useState(false),
      isOpen = _React$useState[0],
      setIsOpen = _React$useState[1];
2900
  var doOpenModal = function doOpenModal() {
    return !isOpen ? setIsOpen(true) : null;
  };
2904
  var doCloseModal = function doCloseModal() {
    return isOpen ? setIsOpen(false) : null;
  };
2908
  return React__default.createElement(ModalContext.Provider, {
    value: {
      isOpen: isOpen,
      doOpenModal: doOpenModal,
      doCloseModal: doCloseModal
    }
  }, props.children);
};
2917
var oppositeDirections = {
  top: 'bottom',
  bottom: 'top',
  right: 'left',
  left: 'right'
};
var getOppositePosition = function getOppositePosition(position) {
  return oppositeDirections[position];
};
2927
var splitPlacement = function splitPlacement(placement) {
  return placement.split('-');
};
2931
function getArrowStyles(placement, arrowSize) {
  var _ref;
2934
  var _splitPlacement = splitPlacement(placement),
      position = _splitPlacement[0];
2937
  var oppositePosition = getOppositePosition(position);
  if (!oppositePosition) return {};
  return _ref = {}, _ref[oppositePosition] = "-" + arrowSize / 2 + "px", _ref.width = arrowSize, _ref.height = arrowSize, _ref.position = 'absolute', _ref.transform = 'rotate(45deg)', _ref;
}
var isBrowser$2 = typeof window !== 'undefined';
var useSafeLayoutEffect$1 = isBrowser$2 ? React.useLayoutEffect : React.useEffect;
function usePopper(props) {
  var _props$placement = props.placement,
      initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
      offsetProp = props.offset,
      _props$preventOverflo = props.preventOverflow,
      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
      _props$fixed = props.fixed,
      fixed = _props$fixed === void 0 ? false : _props$fixed,
      _props$forceUpdate = props.forceUpdate,
      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
      _props$flip = props.flip,
      flip = _props$flip === void 0 ? true : _props$flip,
      _props$arrowSize = props.arrowSize,
      arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
      _props$gutter = props.gutter,
      gutter = _props$gutter === void 0 ? arrowSize : _props$gutter,
      _props$eventsEnabled = props.eventsEnabled,
      eventsEnabled = _props$eventsEnabled === void 0 ? true : _props$eventsEnabled;
  var popper = React.useRef(null);
  var referenceRef = React.useRef(null);
  var popoverRef = React.useRef(null);
  var arrowRef = React.useRef(null);
2966
  var _React$useState = React.useState(initialPlacement),
      originalPlacement = _React$useState[0],
      place = _React$useState[1];
2970
  var _React$useState2 = React.useState(initialPlacement),
      placement = _React$useState2[0],
      setPlacement = _React$useState2[1];
2974
  var _React$useState3 = React.useState(offsetProp || [0, gutter]),
      offset = _React$useState3[0];
2977
  var _React$useState4 = React.useState({}),
      popoverStyles = _React$useState4[0],
      setPopoverStyles = _React$useState4[1];
2981
  var _React$useState5 = React.useState({}),
      arrowStyles = _React$useState5[0],
      setArrowStyles = _React$useState5[1];
2985
  var update = React.useCallback(function () {
    if (popper.current) {
      popper.current.forceUpdate();
      return true;
    }
2991
    return false;
  }, []);
  useSafeLayoutEffect$1(function () {
    if (referenceRef.current && popoverRef.current) {
      popper.current = core.createPopper(referenceRef.current, popoverRef.current, {
        placement: originalPlacement,
        strategy: fixed ? 'fixed' : 'absolute',
        modifiers: [{
          name: 'eventListener',
          phase: 'write',
          enabled: eventsEnabled
        }, {
          name: 'applyStyles',
          enabled: false
        }, {
          name: 'flip',
          enabled: flip,
          options: {
            padding: 8
          }
        }, {
          name: 'computeStyles',
          options: {
            gpuAcceleration: false
          }
        }, {
          name: 'offset',
          options: {
            offset: offset
          }
        }, {
          name: 'preventOverflow',
          enabled: preventOverflow,
          options: {
            tetherOffset: function tetherOffset() {
              var _arrowRef$current;
3028
              return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0;
            }
          }
        }, {
          name: 'arrow',
          enabled: Boolean(arrowRef.current),
          options: {
            element: arrowRef.current
          }
        }, {
          name: 'updateState',
          phase: 'write',
          enabled: true,
          fn: function fn(_ref2) {
            var state = _ref2.state;
            setPlacement(state.placement);
            setPopoverStyles(state.styles.popper);
            setArrowStyles(state.styles.arrow);
          }
        }]
      });
    }
3051
    return function () {
      if (popper.current) {
        popper.current.destroy();
        popper.current = null;
      }
    };
  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
  useSafeLayoutEffect$1(function () {
    requestAnimationFrame(function () {
      if (forceUpdate) {
        var _popper$current;
3063
        (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate();
      }
    });
  }, [forceUpdate]);
3068
  var computedArrowStyles = _objectSpread2({}, arrowStyles, {}, getArrowStyles(placement, arrowSize));
3070
  return {
    popperInstance: popper.current,
    reference: {
      ref: referenceRef
    },
    popper: {
      ref: popoverRef,
      style: popoverStyles
    },
    arrow: {
      ref: arrowRef,
      style: computedArrowStyles
    },
    update: update,
    placement: placement,
    place: place
  };
}
3089
var _createContext = /*#__PURE__*/createContext({
  strict: false
}),
    usePortalManager = _createContext[1];
3094
var _createContext$1 = /*#__PURE__*/createContext({
  strict: false
}),
    PortalCtxProvider = _createContext$1[0],
    usePortalContext = _createContext$1[1];
3100
function Portal(props) {
  var onMount = props.onMount,
      onUnmount = props.onUnmount,
      children = props.children,
      containerProp = props.container;
3106
  var _React$useState = React.useState(function () {
    if (isBrowser) {
      var div = document.createElement('div');
      div.className = 'portal';
      return div;
    }
3113
    return null;
  }),
      portal = _React$useState[0];
3117
  var parentPortal = usePortalContext();
  var manager = usePortalManager();
  var append = React.useCallback(function (container) {
    if (!portal || !container) return;
    container.appendChild(portal);
  }, [portal]);
  useSafeLayoutEffect(function () {
    var _ref, _ref2;
3126
    var mountNode = containerProp === null || containerProp === void 0 ? void 0 : containerProp();
    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;
    append(container);
    onMount === null || onMount === void 0 ? void 0 : onMount();
    return function () {
      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
      if (!portal) return;
3134
      if (container === null || container === void 0 ? void 0 : container.contains(portal)) {
        container === null || container === void 0 ? void 0 : container.removeChild(portal);
      }
    };
  }, [containerProp, portal, parentPortal, onMount, onUnmount, manager && manager.node, append]);
  var finalChildren = (manager === null || manager === void 0 ? void 0 : manager.zIndex) ? React.createElement("div", {
    className: "portal-zIndex",
    style: {
      zIndex: manager.zIndex
    }
  }, children) : children;
3146
  if (!portal) {
    return React.createElement(React.Fragment, null, finalChildren);
  }
3150
  return reactDom.createPortal(React.createElement(PortalCtxProvider, {
    value: portal
  }, finalChildren), portal);
}
3155
{
  Portal.displayName = 'Portal';
}
3159
var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var isInline = _ref.isInline,
      children = _ref.children,
      align = _ref.align,
      justify = _ref.justify,
      _ref$spacing = _ref.spacing,
      spacing = _ref$spacing === void 0 ? 2 : _ref$spacing,
      shouldWrapChildren = _ref.shouldWrapChildren,
      rest = _objectWithoutPropertiesLoose(_ref, ["isInline", "children", "align", "justify", "spacing", "shouldWrapChildren"]);
3169
  var validChildren = Array.isArray(children) ? children.filter(React.isValidElement) : [];
  return React__default.createElement(Flex, Object.assign({
    align: align,
    justify: justify,
    flexDir: isInline ? 'row' : 'column',
    ref: ref
  }, rest), React.Children.map(validChildren, function (child, index) {
    if (!React.isValidElement(child)) {
      return null;
    }
3180
    if (!Array.isArray(children)) {
      return null;
    }
3184
    var isLastChild = validChildren.length === index + 1;
    var spacingProps = isInline ? {
      mr: isLastChild ? undefined : spacing
    } : {
      mb: isLastChild ? undefined : spacing
    };
3191
    if (shouldWrapChildren) {
      return React__default.createElement(Box, Object.assign({
        d: "inline-block"
      }, spacingProps), child);
    }
3197
    return React.cloneElement(child, spacingProps);
  }));
});
Stack.displayName = 'Stack';
3202
var Transition = function Transition(_ref) {
  var styles = _ref.styles,
      inProp = _ref["in"],
      _ref$timeout = _ref.timeout,
      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
      _ref$transition = _ref.transition,
      transition = _ref$transition === void 0 ? "all " + timeout + "ms cubic-bezier(0.23, 1, 0.32, 1)" : _ref$transition,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["styles", "in", "timeout", "transition", "children"]);
3212
  var computedStyle = function computedStyle(state) {
    return _objectSpread2({}, styles.init, {
      transition: transition
    }, styles[state]);
  };
3218
  return React.createElement(CSSTransition, Object.assign({
    appear: true,
    unmountOnExit: true,
    "in": inProp,
    timeout: timeout
  }, rest), function (state) {
    return children(computedStyle(state));
  });
};
3228
var styles = {
  init: {
    opacity: 0
  },
  entered: {
    opacity: 1
  },
  exiting: {
    opacity: 0
  }
};
var Fade = function Fade(_ref) {
  var _ref$timeout = _ref.timeout,
      timeout = _ref$timeout === void 0 ? 250 : _ref$timeout,
      rest = _objectWithoutPropertiesLoose(_ref, ["timeout"]);
3244
  return React.createElement(Transition, Object.assign({
    transition: "all " + timeout + "ms cubic-bezier(0.175, 0.885, 0.320, 1.175)",
    styles: styles,
    timeout: {
      enter: 50,
      exit: timeout
    }
  }, rest));
};
3254
var getTransitionStyles = function getTransitionStyles(initialScale) {
  return {
    init: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    },
    entered: {
      opacity: 1,
      transform: 'scale(1)'
    },
    exiting: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    }
  };
};
3271
var ScaleFade = function ScaleFade(_ref) {
  var _ref$initialScale = _ref.initialScale,
      initialScale = _ref$initialScale === void 0 ? 0.9 : _ref$initialScale,
      _ref$timeout = _ref.timeout,
      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
      rest = _objectWithoutPropertiesLoose(_ref, ["initialScale", "timeout"]);
3278
  return React.createElement(Transition, Object.assign({
    styles: React.useMemo(function () {
      return getTransitionStyles(initialScale);
    }, [initialScale]),
    transition: "all " + timeout + "ms cubic-bezier(0.45, 0, 0.40, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    },
    unmountOnExit: true
  }, rest));
};
3291
var createBaseStyle = function createBaseStyle(placement) {
  switch (placement) {
    case 'bottom':
      {
        return {
          maxWidth: '100vw',
          bottom: 0,
          left: 0,
          right: 0
        };
      }
3303
    case 'top':
      {
        return {
          maxWidth: '100vw',
          top: 0,
          left: 0,
          right: 0
        };
      }
3313
    case 'left':
      {
        return {
          width: '100%',
          height: '100vh',
          left: 0,
          top: 0
        };
      }
3323
    case 'right':
      {
        return {
          width: '100%',
          right: 0,
          top: 0,
          height: '100vh'
        };
      }
3333
    default:
      return undefined;
  }
};
3338
var getTransformStyle = function getTransformStyle(placement, value) {
  var axis = '';
  if (placement === 'left' || placement === 'right') axis = 'X';
  if (placement === 'top' || placement === 'bottom') axis = 'Y';
  return "translate" + axis + "(" + value + ")";
};
3345
var getTransitionStyles$1 = function getTransitionStyles(placement) {
  var offset = {
    bottom: '100%',
    top: '-100%',
    left: '-100%',
    right: '100%'
  };
  return {
    init: {
      transform: getTransformStyle(placement, offset[placement])
    },
    entered: {
      transform: getTransformStyle(placement, '0%')
    },
    exiting: {
      transform: getTransformStyle(placement, offset[placement])
    }
  };
};
3365
function Slide(props) {
  var _props$placement = props.placement,
      placement = _props$placement === void 0 ? 'left' : _props$placement,
      _props$timeout = props.timeout,
      timeout = _props$timeout === void 0 ? 250 : _props$timeout,
      children = props.children,
      rest = _objectWithoutPropertiesLoose(props, ["placement", "timeout", "children"]);
3373
  var styles = getTransitionStyles$1(placement);
3375
  var positionStyles = _objectSpread2({
    position: 'fixed',
    willChange: 'transform'
  }, createBaseStyle(placement));
3380
  return React.createElement(Transition, Object.assign({
    styles: styles,
    transition: "all " + timeout + "ms cubic-bezier(0, 0, 0.2, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    }
  }, rest), function (styles) {
    return children(_objectSpread2({}, positionStyles, {}, styles));
  });
}
3392
function getTransitionStyles$2(initialOffset) {
  return {
    init: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    },
    entered: {
      opacity: 1,
      transform: 'translateY(0px)'
    },
    exiting: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    }
  };
}
3409
var SlideFade = function SlideFade(props) {
  var _props$initialOffset = props.initialOffset,
      initialOffset = _props$initialOffset === void 0 ? '20px' : _props$initialOffset,
      _props$timeout = props.timeout,
      timeout = _props$timeout === void 0 ? 150 : _props$timeout,
      rest = _objectWithoutPropertiesLoose(props, ["initialOffset", "timeout"]);
3416
  var styles = getTransitionStyles$2(initialOffset);
  return React.createElement(Transition, Object.assign({
    styles: styles,
    transition: "all " + timeout + "ms cubic-bezier(0.4, 0.14, 0.3, 1)",
    timeout: {
      enter: 50,
      exit: timeout
    }
  }, rest));
};
3427
var toneToIcon = {
  critical: ExclamationMarkCircleIcon,
  positive: CheckmarkCircleIcon,
  none: function none() {
    return null;
  }
};
3435
var Action = function Action(_ref) {
  var label = _ref.label,
      onClick = _ref.onClick,
      removeToast = _ref.removeToast,
      rest = _objectWithoutPropertiesLoose(_ref, ["label", "onClick", "removeToast"]);
3441
  var handleClick = React.useCallback(function () {
    removeToast();
    onClick();
  }, [removeToast, onClick]);
  return React__default.createElement(Box, Object.assign({
    _hover: {
      cursor: 'pointer',
      textDecoration: 'underline'
    },
    onClick: handleClick,
    "aria-hidden": true
  }, rest), React__default.createElement(Text, null, label));
};
3455
var getCustomProps = function getCustomProps(props) {
  var _props, _props2, _props3, _props4, _props5, _props5$icon, _props6, _props7;
3458
  if (props === void 0) {
    props = {};
  }
3462
  return {
    message: _objectSpread2({
      color: 'ink'
    }, (_props = props) === null || _props === void 0 ? void 0 : _props.message),
    description: _objectSpread2({
      color: 'ink.600'
    }, (_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.description),
    toast: _objectSpread2({
      background: 'white',
      borderColor: 'inherit',
      boxShadow: 'high'
    }, (_props3 = props) === null || _props3 === void 0 ? void 0 : _props3.toast),
    icon: _objectSpread2({}, (_props4 = props) === null || _props4 === void 0 ? void 0 : _props4.icon, {
      color: _objectSpread2({
        critical: 'red',
        positive: 'green'
      }, (_props5 = props) === null || _props5 === void 0 ? void 0 : (_props5$icon = _props5.icon) === null || _props5$icon === void 0 ? void 0 : _props5$icon.color)
    }),
    close: _objectSpread2({
      color: 'ink.600'
    }, (_props6 = props) === null || _props6 === void 0 ? void 0 : _props6.close),
    action: _objectSpread2({
      color: 'blue',
      fontSize: '14px'
    }, (_props7 = props) === null || _props7 === void 0 ? void 0 : _props7.action)
  };
};
3490
var CloseButton = function CloseButton(_ref2) {
  var onClick = _ref2.onClick,
      rest = _objectWithoutPropertiesLoose(_ref2, ["onClick"]);
3494
  var _useHover = useEvents.useHover(),
      hover = _useHover[0],
      bind = _useHover[1];
3498
  var _useFocus = useEvents.useFocus(),
      focus = _useFocus[0],
      focusBind = _useFocus[1];
3502
  return React__default.createElement(Flex, Object.assign({
    position: "relative",
    justify: "center",
    cursor: hover ? 'pointer' : 'unset',
    onClick: onClick
  }, bind, rest), React__default.createElement(Box, Object.assign({
    ml: "tight",
    mt: "extra-tight",
    opacity: hover ? 1 : 0.5,
    as: "button",
    role: "button",
    "aria-label": "Close popup",
    title: "Close",
    style: {
      outline: 'none'
    },
    position: "relative",
    zIndex: 99,
    transition: transition
  }, focusBind), React__default.createElement(CloseIcon, {
    size: "12px"
  })), React__default.createElement(Box, {
    size: "24px",
    bg: "currentColor",
    borderRadius: "100%",
    position: "absolute",
    left: "-50%",
    top: "-50%",
    opacity: hover ? 0.1 : 0,
    transform: "translate3d(12px, 6px, 0)",
    transition: transition,
    boxShadow: focus ? 'focus' : 'unset'
  }));
};
3537
var Description = function Description(_ref3) {
  var children = _ref3.children,
      rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
3541
  return React__default.createElement(Text, Object.assign({
    fontSize: "14px",
    style: {
      wordBreak: 'break-word'
    },
    display: "block"
  }, rest), children);
};
3550
var Message = function Message(_ref4) {
  var children = _ref4.children,
      rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
3554
  return React__default.createElement(Text, Object.assign({
    fontWeight: "600",
    display: "block"
  }, rest), children);
};
3560
var ToastContent = function ToastContent(_ref5) {
  var _ref5$styles = _ref5.styles,
      styles = _ref5$styles === void 0 ? {} : _ref5$styles,
      message = _ref5.message,
      description = _ref5.description,
      action = _ref5.action,
      remove = _ref5.remove,
      rest = _objectWithoutPropertiesLoose(_ref5, ["styles", "message", "description", "action", "remove"]);
3569
  return description ? React__default.createElement(Stack, Object.assign({
    spacing: "tight"
  }, 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({
    key: action.label,
    removeToast: remove
  }, action, styles.action)) : null) : React__default.createElement(Stack, Object.assign({
    spacing: "tight"
  }, rest), React__default.createElement(Message, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.message), message), action ? React__default.createElement(Action, Object.assign({
    key: action.label,
    removeToast: remove
  }, action, styles.action)) : null);
};
3582
var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
  var _rect$height;
3585
  var propsId = _ref6.id,
      message = _ref6.message,
      description = _ref6.description,
      _ref6$tone = _ref6.tone,
      tone = _ref6$tone === void 0 ? 'none' : _ref6$tone,
      onClear = _ref6.onClear,
      action = _ref6.action,
      _ref6$toastProps = _ref6.toastProps,
      toastProps = _ref6$toastProps === void 0 ? {} : _ref6$toastProps;
  var id = autoId.useId(propsId);
  var styles = React.useMemo(function () {
    return getCustomProps(toastProps);
  }, [toastProps]);
  var remove = React.useCallback(function () {
    return onClear(id);
  }, [onClear, id]);
  var toastRef = React.useRef(null);
  var rect$1 = rect.useRect(toastRef);
3604
  var _React$useState = React__default.useState(true),
      show = _React$useState[0],
      setShow = _React$useState[1];
3608
  var height = (_rect$height = rect$1 === null || rect$1 === void 0 ? void 0 : rect$1.height) !== null && _rect$height !== void 0 ? _rect$height : 0;
3610
  var onExit = function onExit() {
    if (!show) {
      onClear(id);
    }
  };
3616
  var onClose = React__default.useCallback(function () {
    setShow(false);
  }, []);
3620
  var _useTimeout = useTimeout({
    duration: 7200,
    onTimeout: onClose
  }),
      stopTimeout = _useTimeout.stopTimeout,
      startTimeout = _useTimeout.startTimeout;
3627
  var animationStyles = {
    init: {
      opacity: 0,
      height: 0,
      transform: 'scale(1)'
    },
    entered: {
      opacity: 1,
      height: height,
      transform: 'scale(1)'
    },
    exiting: {
      opacity: 0,
      height: 0,
      transform: 'scale(0.9)'
    }
  };
  var noIcon = tone === 'none';
  var Icon = toneToIcon[tone];
  return React__default.createElement(Transition, {
    styles: animationStyles,
    "in": show,
    onExited: onExit,
    timeout: 350
  }, function (transitionStyles) {
    return React__default.createElement(Box, {
      onMouseEnter: stopTimeout,
      onMouseLeave: startTimeout,
      style: _objectSpread2({
        willChange: 'transform, height, opacity'
      }, transitionStyles),
      ref: ref
    }, React__default.createElement(Flex, {
      justify: "center",
      as: ReachAlert,
      maxWidth: "100%",
      pb: "tight",
      px: "tight",
      ref: toastRef
    }, React__default.createElement(Box, Object.assign({
      p: "base",
      border: "1px solid",
      borderColor: "inherit",
      borderRadius: "6px",
      maxWidth: "100%"
    }, styles.toast, {
      style: {
        pointerEvents: 'all'
      }
    }), React__default.createElement(Box, {
      position: "relative"
    }, React__default.createElement(Flex, {
      align: "flex-start"
    }, tone !== 'none' ? React__default.createElement(Box, Object.assign({
      pt: "extra-tight",
      pr: "tight"
    }, styles === null || styles === void 0 ? void 0 : styles.icon, {
      color: styles.icon.color[tone]
    }), React__default.createElement(Icon, {
      size: "16px"
    })) : null, React__default.createElement(Box, {
      pr: noIcon ? 'unset' : 'base'
    }, React__default.createElement(ToastContent, {
      message: message,
      description: description,
      action: action,
      styles: styles,
      remove: remove
    })), React__default.createElement(CloseButton, {
      onClick: onClose
    }))))));
  });
});
3701
var Toaster = function Toaster(_ref) {
  var toasts = _ref.toasts,
      removeToast = _ref.removeToast,
      rest = _objectWithoutPropertiesLoose(_ref, ["toasts", "removeToast"]);
3706
  var onClear = React.useCallback(function (id) {
    removeToast(id);
  }, [removeToast]);
  return React__default.createElement(Flex, Object.assign({
    align: "center",
    justify: "flex-end",
    flexDirection: "column",
    position: "fixed",
    width: "100%",
    height: "100vh",
    bottom: 0,
    zIndex: 9999999,
    style: {
      pointerEvents: 'none'
    }
  }, rest), toasts.map(function (_ref2) {
    var id = _ref2.id,
        rest = _objectWithoutPropertiesLoose(_ref2, ["id"]);
3725
    return React__default.createElement(Box, {
      key: id
    }, React__default.createElement(Toast, Object.assign({
      id: id,
      onClear: onClear
    }, rest)));
  }));
};
3734
var toastCounter = 0;
var ToastControllerContext = /*#__PURE__*/React.createContext(null);
var QUEUE_TOAST = 0;
var REMOVE_TOAST = 1;
3739
function reducer(state, action) {
  switch (action.type) {
    case QUEUE_TOAST:
      {
        return _objectSpread2({}, state, {
          toasts: [].concat(state.toasts, [action.payload])
        });
      }
3748
    case REMOVE_TOAST:
      {
        var toasts = state.toasts.filter(function (_ref) {
          var id = _ref.id;
          return id !== action.payload;
        });
        return _objectSpread2({}, state, {
          toasts: toasts
        });
      }
  }
3760
  return state;
}
3763
var InternalToastProvider = function InternalToastProvider(_ref2) {
  var children = _ref2.children;
3766
  var _useReducer = React.useReducer(reducer, {
    toasts: []
  }),
      toasts = _useReducer[0].toasts,
      dispatch = _useReducer[1];
3772
  var addToast = React.useCallback(function (props) {
    return dispatch({
      type: QUEUE_TOAST,
      payload: props
    });
  }, []);
  var removeToast = React.useCallback(function (id) {
    return dispatch({
      type: REMOVE_TOAST,
      payload: id
    });
  }, []);
  return React__default.createElement(ToastControllerContext.Provider, {
    value: addToast
  }, children, React__default.createElement(Portal, null, React__default.createElement(Toaster, {
    toasts: toasts,
    removeToast: removeToast
  })));
};
3792
var ToastProvider = function ToastProvider(_ref3) {
  var children = _ref3.children;
  var currentContext = React.useContext(ToastControllerContext);
3796
  if (currentContext !== null) {
    return React__default.createElement(React__default.Fragment, null, children);
  }
3800
  return React__default.createElement(InternalToastProvider, null, children);
};
var useToast = function useToast() {
  var addToast = React.useContext(ToastControllerContext);
3805
  if (addToast === null) {
    throw new Error('No "ToastProvider" configured');
  }
3809
  return React.useCallback(function (props) {
    return addToast(_objectSpread2({}, props, {
      id: "" + toastCounter++
    }));
  }, [addToast]);
};
3816
var hideOperation;
var activeId = null;
3819
function show(fn, delay) {
  var _hideOperation;
3822
  var isHidePending = (_hideOperation = hideOperation) === null || _hideOperation === void 0 ? void 0 : _hideOperation.pending();
3824
  if (isHidePending) {
    hideOperation.flush();
  }
3828
  var showOperation = flushable(function () {
    return fn(isHidePending);
  }, isHidePending ? 0 : delay);
  return showOperation.cancel;
}
3834
function hide(fn, delay) {
  hideOperation = flushable(function (flushed) {
    return fn(flushed);
  }, delay);
  return hideOperation.cancel;
}
3841
function useTooltip(props) {
  if (props === void 0) {
    props = {};
  }
3846
  var _props = props,
      _props$showDelay = _props.showDelay,
      showDelay = _props$showDelay === void 0 ? 200 : _props$showDelay,
      _props$hideDelay = _props.hideDelay,
      hideDelay = _props$hideDelay === void 0 ? 200 : _props$hideDelay,
      _props$hideOnClick = _props.hideOnClick,
      hideOnClick = _props$hideOnClick === void 0 ? false : _props$hideOnClick,
      onShow = _props.onShow,
      onHide = _props.onHide,
      hideOnMouseDown = _props.hideOnMouseDown,
      placement = _props.placement,
      id = _props.id,
      isOpenProp = _props.isOpen,
      defaultIsOpen = _props.defaultIsOpen,
      _props$arrowSize = _props.arrowSize,
      arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
      _label = _props.label;
3864
  var _React$useState = React.useState(_label),
      label = _React$useState[0],
      setLabel = _React$useState[1];
3868
  var labelIsUpToDate = _label === label;
  if (!labelIsUpToDate) setLabel(_label);
3871
  var _useDisclosure = useDisclosure({
    isOpen: isOpenProp,
    defaultIsOpen: defaultIsOpen,
    onOpen: onShow,
    onClose: onHide
  }),
      isOpen = _useDisclosure.isOpen,
      open = _useDisclosure.onOpen,
      close = _useDisclosure.onClose;
3881
  var popper = usePopper({
    forceUpdate: isOpen && labelIsUpToDate,
    placement: placement,
    arrowSize: arrowSize
  });
  var tooltipId = useId(id, 'tooltip');
  var ref = React.useRef(null);
  var triggerRef = useMergeRefs(ref, popper.reference.ref);
  var flushRef = React.useRef();
  React.useEffect(function () {
    return function () {
      var _flushRef$current;
3894
      return (_flushRef$current = flushRef.current) === null || _flushRef$current === void 0 ? void 0 : _flushRef$current.call(flushRef);
    };
  }, []);
  var hideImmediately = React.useCallback(function () {
    var _flushRef$current2;
3900
    (_flushRef$current2 = flushRef.current) === null || _flushRef$current2 === void 0 ? void 0 : _flushRef$current2.call(flushRef);
    close();
  }, [close]);
  var onClick = React.useCallback(function () {
    if (hideOnClick) {
      hideImmediately();
    }
  }, [hideOnClick, hideImmediately]);
  var onMouseDown = React.useCallback(function () {
    if (hideOnMouseDown) {
      hideImmediately();
    }
  }, [hideOnMouseDown, hideImmediately]);
  var showTooltip = React.useCallback(function () {
    var _flushRef$current3;
3916
    (_flushRef$current3 = flushRef.current) === null || _flushRef$current3 === void 0 ? void 0 : _flushRef$current3.call(flushRef);
3918
    if (tooltipId !== activeId) {
      hideImmediately();
    }
3922
    activeId = tooltipId;
3924
    if (!isOpen) {
      flushRef.current = show(function () {
        open();
      }, showDelay);
    }
  }, [isOpen, showDelay, open, tooltipId, hideImmediately]);
  var hideTooltip = React.useCallback(function () {
    var _flushRef$current4;
3933
    (_flushRef$current4 = flushRef.current) === null || _flushRef$current4 === void 0 ? void 0 : _flushRef$current4.call(flushRef);
    activeId = null;
3936
    if (isOpen) {
      flushRef.current = hide(function () {
        close();
      }, hideDelay);
    }
  }, [isOpen, hideDelay, close]);
  var onMouseOver = React.useCallback(function (event) {
    var isSelf = event.target === ref.current;
3945
    if (isOpen && isSelf) {
      return;
    }
3949
    showTooltip();
  }, [isOpen, showTooltip]);
  var onKeyDown = React.useCallback(function (event) {
    if (isOpen && event.key === 'Escape') {
      hideImmediately();
    }
  }, [isOpen, hideImmediately]);
  useEventListener('keydown', onKeyDown);
  return {
    isOpen: isOpen,
    show: open,
    hide: close,
    placement: popper.placement,
    getTriggerProps: function getTriggerProps(props) {
      if (props === void 0) {
        props = {};
      }
3967
      return _objectSpread2({}, props, {
        ref: mergeRefs(props.ref, triggerRef),
        onMouseOut: callAllHandlers(props.onMouseOut, hideTooltip),
        onMouseOver: callAllHandlers(props.onMouseOver, onMouseOver),
        onClick: callAllHandlers(props.onClick, onClick),
        onMouseDown: callAllHandlers(props.onMouseDown, onMouseDown),
        onFocus: callAllHandlers(props.onFocus, showTooltip),
        onBlur: callAllHandlers(props.onBlur, hideTooltip),
        'aria-describedby': isOpen ? tooltipId : undefined
      });
    },
    getTooltipProps: function getTooltipProps(props) {
      if (props === void 0) {
        props = {};
      }
3983
      return _objectSpread2({}, props, {
        id: tooltipId,
        role: 'tooltip',
        ref: mergeRefs(props.ref, popper.popper.ref),
        style: _objectSpread2({}, props.style, {}, popper.popper.style)
      });
    },
    getArrowProps: function getArrowProps(props) {
      if (props === void 0) {
        props = {};
      }
3995
      return _objectSpread2({}, props, {
        ref: mergeRefs(props.ref, popper.arrow.ref),
        style: _objectSpread2({}, props.style, {}, popper.arrow.style)
      });
    }
  };
}
4003
function Tooltip(props) {
  var children = props.children,
      label = props.label,
      shouldWrapChildren = props.shouldWrapChildren,
      ariaLabel = props['aria-label'],
      hasArrow = props.hasArrow,
      rest = _objectWithoutPropertiesLoose(props, ["children", "label", "shouldWrapChildren", "aria-label", "hasArrow"]);
4011
  if (!label || label === '') {
    var child = React.Children.only(children);
    return React.cloneElement(child, _objectSpread2({}, child.props, {}, rest));
  }
4016
  var _useTooltip = useTooltip(props),
      isOpen = _useTooltip.isOpen,
      getTriggerProps = _useTooltip.getTriggerProps,
      getTooltipProps = _useTooltip.getTooltipProps,
      getArrowProps = _useTooltip.getArrowProps;
4022
  var trigger;
4024
  if (isString(children) || shouldWrapChildren) {
    trigger = React.createElement(Box, Object.assign({
      as: "span",
      tabIndex: 0
    }, getTriggerProps()), children);
  } else {
    var _child = React.Children.only(children);
4032
    trigger = React.cloneElement(_child, getTriggerProps(_child.props));
  }
4035
  var hasAriaLabel = Boolean(ariaLabel);
  var baseTooltipProps = getTooltipProps(rest);
4038
  var _ref = hasAriaLabel ? omit(baseTooltipProps, ['role', 'id']) : baseTooltipProps,
      style = _ref.style,
      tooltipProps = _objectWithoutPropertiesLoose(_ref, ["style"]);
4042
  var hiddenProps = pick(baseTooltipProps, ['role', 'id']);
  return React.createElement(React.Fragment, null, trigger, isOpen && React.createElement(Portal, null, React.createElement(Box, Object.assign({
    paddingX: "8px",
    paddingY: "tight",
    bg: "ink",
    color: "white",
    borderRadius: "6px",
    textStyle: "caption.medium",
    maxWidth: "320px"
  }, tooltipProps, {
    style: _objectSpread2({}, style, {
      useSelect: 'none'
    })
  }), label, hasAriaLabel && React.createElement(VisuallyHidden, Object.assign({}, hiddenProps), ariaLabel), hasArrow && React.createElement(Box, Object.assign({
    "data-arrow": "",
    bg: "inherit"
  }, getArrowProps())))));
}
4061
var copyToClipboard = function copyToClipboard(value) {
  var el = document.createElement('textarea');
  el.value = value;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  var curSelection = document.getSelection();
  var selected = curSelection && curSelection.rangeCount > 0 ? curSelection.getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
4074
  if (selected) {
    var _document$getSelectio, _document$getSelectio2;
4077
    (_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 ? void 0 : _document$getSelectio.removeAllRanges();
    (_document$getSelectio2 = document.getSelection()) === null || _document$getSelectio2 === void 0 ? void 0 : _document$getSelectio2.addRange(selected);
  }
};
4082
function useClipboard(value) {
  var _useState = React.useState(false),
      hasCopied = _useState[0],
      setHasCopied = _useState[1];
4087
  var onCopy = function onCopy() {
    copyToClipboard(value);
    setHasCopied(true);
    setTimeout(function () {
      return setHasCopied(false);
    }, 1500);
  };
4095
  return {
    value: value,
    onCopy: onCopy,
    hasCopied: hasCopied
  };
}
4102
var nativeExceptions = /*#__PURE__*/[EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError].filter(function (except) {
  return typeof except === 'function';
});
4106
function throwNative(error) {
  for (var _iterator = _createForOfIteratorHelperLoose(nativeExceptions), _step; !(_step = _iterator()).done;) {
    var Exception = _step.value;
    if (error instanceof Exception) throw error;
  }
}
4113
function safeAwait(promise, finallyFn) {
  return promise.then(function (data) {
    if (data instanceof Error) {
      throwNative(data);
      return [data];
    }
4120
    return [undefined, data];
  })["catch"](function (error) {
    throwNative(error);
    return [error];
  })["finally"](function () {
    if (finallyFn) finallyFn();
  });
}
4129
exports.AppsIcon = AppsIcon;
exports.ArrowIcon = ArrowIcon;
exports.BlockchainIcon = BlockchainIcon;
exports.BlockstackIcon = BlockstackIcon;
exports.Box = Box;
exports.Button = Button;
exports.ButtonGroup = ButtonGroup;
exports.CSSReset = CSSReset;
exports.CheckmarkCircleIcon = CheckmarkCircleIcon;
exports.CheckmarkIcon = CheckmarkIcon;
exports.ChevronIcon = ChevronIcon;
exports.CloseIcon = CloseIcon;
exports.CodeBlock = CodeBlock;
exports.ColorModeContext = ColorModeContext;
exports.ColorModeProvider = ColorModeProvider;
exports.ColorModes = ColorModes;
exports.ConnectLogoIcon = ConnectLogoIcon;
exports.EncryptionIcon = EncryptionIcon;
exports.ExclamationMarkCircleIcon = ExclamationMarkCircleIcon;
exports.ExclamationMarkIcon = ExclamationMarkIcon;
exports.ExternalIcon = ExternalIcon;
exports.EyeIcon = EyeIcon;
exports.Fade = Fade;
exports.FailedIcon = FailedIcon;
exports.Flex = Flex;
exports.FormControl = FormControl;
exports.FormLabel = FormLabel;
exports.Grid = Grid;
exports.Highlighter = Highlighter;
exports.Input = Input;
exports.InputAddon = InputAddon;
exports.InputElement = InputElement;
exports.InputGroup = InputGroup;
exports.InputLeftAddon = InputLeftAddon;
exports.InputLeftElement = InputLeftElement;
exports.InputRightAddon = InputRightAddon;
exports.InputRightElement = InputRightElement;
exports.Modal = Modal;
exports.ModalProvider = ModalProvider;
exports.PadlockIcon = PadlockIcon;
exports.PlusCircleIcon = PlusCircleIcon;
exports.Portal = Portal;
exports.PrivateIcon = PrivateIcon;
exports.PseudoBox = Box;
exports.RequiredIndicator = RequiredIndicator;
exports.ScaleFade = ScaleFade;
exports.ScopedCSSReset = ScopedCSSReset;
exports.Slide = Slide;
exports.SlideFade = SlideFade;
exports.Spinner = Spinner;
exports.Stack = Stack;
exports.StyledBox = StyledBox;
exports.Svg = Svg;
exports.Text = Text;
exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.Toast = Toast;
exports.ToastProvider = ToastProvider;
exports.Toaster = Toaster;
exports.Tooltip = Tooltip;
exports.Transition = Transition;
exports.UnionLineIcon = UnionLineIcon;
exports.VisuallyHidden = VisuallyHidden;
exports.addBlack = addBlack;
exports.addOpacity = addOpacity;
exports.addWhite = addWhite;
exports.assignRef = assignRef$1;
exports.baseSizes = baseSizes;
exports.color = color;
exports.colorEmphasis = colorEmphasis;
exports.colorGet = colorGet;
exports.generateAlphaColors = generateAlphaColors;
exports.generateCssVariables = generateCssVariables;
exports.generateStripe = generateStripe;
exports.get = get;
exports.getArrowStyles = getArrowStyles;
exports.getOppositePosition = getOppositePosition;
exports.isDarkColor = isDarkColor;
exports.namedSpacingUnits = namedSpacingUnits;
exports.safeAwait = safeAwait;
exports.shadows = shadows;
exports.sizes = sizes;
exports.space = space;
exports.systemProps = systemProps;
exports.textStyles = textStyles;
exports.theme = theme;
exports.themeColor = themeColor;
exports.transition = transition;
exports.useClipboard = useClipboard;
exports.useColorMode = useColorMode;
exports.useControllableProp = useControllableProp;
exports.useControllableState = useControllableState;
exports.useDisclosure = useDisclosure;
exports.useEventListener = useEventListener;
exports.useForceUpdate = useForceUpdate;
exports.useFormControl = useFormControl;
exports.useFormControlContext = useFormControlContext;
exports.useId = useId;
exports.useIds = useIds;
exports.useLatestRef = useLatestRef;
exports.useMergeRefs = useMergeRefs;
exports.useModalState = useModalState;
exports.usePopper = usePopper;
exports.usePrevious = usePrevious;
exports.useSafeLayoutEffect = useSafeLayoutEffect;
exports.useTheme = useTheme;
exports.useTimeout = useTimeout;
exports.useToast = useToast;
4238
Object.defineProperty(exports, '__esModule', { value: true });
4240
4241})));
4242//# sourceMappingURL=ui.umd.development.js.map
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('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', '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.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, 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	`Highlight = Highlight && Object.prototype.hasOwnProperty.call(Highlight, 'default') ? Highlight['default'] : Highlight;`
11	`Color = Color && Object.prototype.hasOwnProperty.call(Color, 'default') ? Color['default'] : Color;`
12	`useOnClickOutside = useOnClickOutside && Object.prototype.hasOwnProperty.call(useOnClickOutside, 'default') ? useOnClickOutside['default'] : useOnClickOutside;`
13	`ReachAlert = ReachAlert && Object.prototype.hasOwnProperty.call(ReachAlert, 'default') ? ReachAlert['default'] : ReachAlert;`
14	`CSSTransition = CSSTransition && Object.prototype.hasOwnProperty.call(CSSTransition, 'default') ? CSSTransition['default'] : CSSTransition;`
15	`flushable = flushable && Object.prototype.hasOwnProperty.call(flushable, 'default') ? flushable['default'] : flushable;`
16
17	`function _defineProperty(obj, key, value) {`
18	`if (key in obj) {`
19	`Object.defineProperty(obj, key, {`
20	`value: value,`
21	`enumerable: true,`
22	`configurable: true,`
23	`writable: true`
24	`});`
25	`} else {`
26	`obj[key] = value;`
27	`}`
28
29	`return obj;`
30	`}`
31
32	`function ownKeys(object, enumerableOnly) {`
33	`var keys = Object.keys(object);`
34
35	`if (Object.getOwnPropertySymbols) {`
36	`var symbols = Object.getOwnPropertySymbols(object);`
37	`if (enumerableOnly) symbols = symbols.filter(function (sym) {`
38	`return Object.getOwnPropertyDescriptor(object, sym).enumerable;`
39	`});`
40	`keys.push.apply(keys, symbols);`