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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var shouldForwardProp = require('@styled-system/should-forward-prop');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var css = _interopDefault(require('@styled-system/css'));
var styledSystem = require('styled-system');
var useEvents = require('use-events');
var Prism = _interopDefault(require('prismjs'));
var Highlight = _interopDefault(require('prism-react-renderer'));
var autoId = require('@reach/auto-id');
var Color = _interopDefault(require('color'));
var themeGet = require('@styled-system/theme-get');
var propTypes = require('prop-types');
var useOnClickOutside = _interopDefault(require('use-onclickoutside'));
var core = require('@popperjs/core');
var reactDom = require('react-dom');
var ReachAlert = _interopDefault(require('@reach/alert'));
var rect = require('@reach/rect');
var CSSTransition = _interopDefault(require('react-transition-group/Transition'));
var flushable = _interopDefault(require('flushable'));

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;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  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);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    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));
      });
    }
  }

  return target;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

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);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _createForOfIteratorHelperLoose(o, allowArrayLike) {
  var it;

  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++]
        };
      };
    }

    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  it = o[Symbol.iterator]();
  return it.next.bind(it);
}

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);

var transformAlias = function transformAlias(prop, propValue) {
  var configKeys = Object.keys(config);
  var result = {};

  if (configKeys.includes(prop)) {
    var _config$prop = config[prop],
        properties = _config$prop.properties,
        property = _config$prop.property;

    if (properties) {
      properties.forEach(function (_cssProp) {
        return result[_cssProp] = propValue;
      });
    }

    if (property) {
      result[property] = propValue;
    }

    if (config[prop] === true) {
      result[prop] = propValue;
    }
  } else {
    result[prop] = propValue;
  }

  return result;
};

var transformAliasProps = function transformAliasProps(props) {
  var result = {};

  for (var prop in props) {
    if (typeof props[prop] === 'object' && !Array.isArray(props[prop])) {
      var _objectSpread2$1;

      result = _objectSpread2({}, result, (_objectSpread2$1 = {}, _objectSpread2$1[prop] = transformAliasProps(props[prop]), _objectSpread2$1));
    } else {
      result = _objectSpread2({}, result, {}, transformAlias(prop, props[prop]));
    }
  }

  return result;
};
var extraProps = /*#__PURE__*/Object.keys(config);

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  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);

var _shouldForwardProp = /*#__PURE__*/shouldForwardProp.createShouldForwardProp( /*#__PURE__*/[].concat(shouldForwardProp.props, extraProps));

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;

  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';

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"]);

  var clones = React.Children.map(children, function (child, index) {
    var isFirst = index === 0;
    var isLast = index === React.Children.count(children) - 1;

    if (!React__default.isValidElement(child)) {
      return null;
    }

    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);
};

ButtonGroup.displayName = 'ButtonGroup';

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
};

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);

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'
};

var bodyLargeMedium = /*#__PURE__*/_objectSpread2({}, bodyLarge, {
  fontWeight: typography.fontWeights.medium
});

var bodySmall = {
  fontWeight: typography.fontWeights.normal,
  fontSize: typography.fontSizes[1],
  lineHeight: typography.lineHeights["short"],
  letterSpacing: '-0.01em'
};

var bodySmallMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});

var caption = {
  fontSize: typography.fontSizes[0],
  lineHeight: typography.lineHeights.shorter,
  letterSpacing: '0.00em'
};

var captionMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});

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
});

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'
};

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
});

var transition = 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)';

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'
};

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'
    }
  };
};

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'
      }
    }
  };

  if (customStyles) {
    return customStyles[mode];
  }

  return style[mode];
};

var sizeProps = function sizeProps(_ref2) {
  var size = _ref2.size;
  return sizes$1[size];
};

var variantProps = function variantProps(props) {
  switch (props.variant) {
    case 'solid':
      return solidVariantProps(props);

    case 'link':
      return linkVariantProps();

    case 'unstyled':
      return unstyledStyle;

    default:
      return {};
  }
};

var useButtonStyle = function useButtonStyle(props) {
  return _objectSpread2({}, baseProps, {}, variantProps(props), {}, sizeProps(props));
};

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"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var VisuallyHidden = /*#__PURE__*/styled__default(Box)( /*#__PURE__*/_templateObject$1());

function _templateObject$2() {
  var data = _taggedTemplateLiteralLoose(["\n  animation: ", " ", " linear infinite;\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  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;
});

var getSize = function getSize(size) {
  switch (size) {
    case 'xs':
      return '0.75rem';

    case 'sm':
      return '1rem';

    case 'md':
      return '1.5rem';

    case 'lg':
      return '2rem';

    case 'xl':
      return '3rem';

    default:
      return size;
  }
};

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"]);

  var _size = getSize(size);

  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';

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"
  });
};

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"]);

  var styles = useButtonStyle({
    variant: variant,
    mode: mode,
    size: size,
    customStyles: customStyles
  });

  var _useHover = useEvents.useHover(),
      hovered = _useHover[0],
      bind = _useHover[1];

  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';

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"]);

  return React__default.createElement(Box, Object.assign({
    ref: ref,
    display: "flex",
    flexDirection: direction,
    alignItems: align,
    justifyContent: justify,
    flexWrap: wrap
  }, rest));
});
Flex.displayName = 'Flex';

var _window = undefined;

try {
  _window = window;
} catch (e) {}

function getWindow(node) {
  var _node$ownerDocument$d, _node$ownerDocument;

  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;
}

function checkIsBrowser() {
  var _window = getWindow();

  return Boolean(typeof _window !== 'undefined' && _window.document && _window.document.createElement);
}

var isBrowser = /*#__PURE__*/checkIsBrowser();
function isFunction(value) {
  return typeof value === 'function';
}
function createContext(options) {
  if (options === void 0) {
    options = {};
  }

  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;

  function useContext() {
    var context = React__default.useContext(Context);
    if (!context && strict) throw new Error(errorMessage);
    return context;
  }

  return [Context.Provider, useContext, Context];
}
function assignRef(ref, value) {
  if (ref == null) return;

  if (isFunction(ref)) {
    ref(value);
    return;
  }

  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];
  }

  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];
  }

  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];
  }

  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 = {};

  for (var key in object) {
    if (keys.includes(key)) continue;
    result[key] = object[key];
  }

  return result;
}
function pick(object, keys) {
  var result = {};

  for (var _iterator = _createForOfIteratorHelperLoose(keys), _step; !(_step = _iterator()).done;) {
    var key = _step.value;

    if (key in object) {
      result[key] = object[key];
    }
  }

  return result;
}
var startPad = function startPad(n, z, s) {
  if (z === void 0) {
    z = 2;
  }

  if (s === void 0) {
    s = '0';
  }

  return (n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + '';
};

function useControllableProp(propValue, stateValue) {
  var _React$useRef = React.useRef(propValue !== undefined),
      isControlled = _React$useRef.current;

  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;

  var _React$useState = React.useState(defaultValue),
      valueState = _React$useState[0],
      setValue = _React$useState[1];

  var _React$useRef2 = React.useRef(valueProp !== undefined),
      isControlled = _React$useRef2.current;

  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]);

  var _React$useRef3 = React.useRef(defaultValue),
      _defaultValue = _React$useRef3.current;

  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;

    if (!isControlled) {
      setValue(next);
    }

    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
  }, [onChange, shouldUpdate, isControlled, value]);
  return [value, updateValue];
}

function usePrevious(value) {
  var valueRef = React.useRef();
  React.useEffect(function () {
    valueRef.current = value;
  }, [value]);
  return valueRef.current;
}

function useDisclosure(props) {
  if (props === void 0) {
    props = {};
  }

  var _props = props,
      onCloseProp = _props.onClose,
      onOpenProp = _props.onOpen;

  var _React$useState = React.useState(props.defaultIsOpen || false),
      isOpenState = _React$useState[0],
      setIsOpen = _React$useState[1];

  var _useControllableProp = useControllableProp(props.isOpen, isOpenState),
      isControlled = _useControllableProp[0],
      isOpen = _useControllableProp[1];

  var prevIsOpen = usePrevious(isOpen);
  var onClose = React.useCallback(function () {
    if (!isControlled) {
      setIsOpen(false);
    }

    if (onCloseProp) {
      onCloseProp();
    }
  }, [isControlled, onCloseProp]);
  var onOpen = React.useCallback(function () {
    if (!isControlled) {
      setIsOpen(true);
    }

    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
  };
}

function useLatestRef(value) {
  var ref = React.useRef(value);
  React.useEffect(function () {
    ref.current = value;
  }, [value]);
  return ref;
}

function useEventListener(event, handler, doc, options) {
  if (doc === void 0) {
    doc = isBrowser ? document : null;
  }

  var savedHandler = useLatestRef(handler);
  React.useEffect(function () {
    if (!doc) return;

    var listener = function listener(event) {
      savedHandler.current(event);
    };

    doc.addEventListener(event, listener, options);
    return function () {
      doc.removeEventListener(event, listener, options);
    };
  }, [event, doc, options, savedHandler]);
  return function () {
    var _doc;

    (_doc = doc) === null || _doc === void 0 ? void 0 : _doc.removeEventListener(event, savedHandler.current, options);
  };
}

function useForceUpdate() {
  var _React$useState = React.useState(0),
      count = _React$useState[0],
      setCount = _React$useState[1];

  return React.useCallback(function () {
    return setCount(count + 1);
  }, [count]);
}

function generatePrefix(prefix, id) {
  return prefix + "-" + id;
}

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);

  for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    prefixes[_key - 1] = arguments[_key];
  }

  return prefixes.map(function (prefix) {
    return generatePrefix(prefix, id);
  });
}

function assignRef$1(ref, value) {
  if (ref == null) return;

  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];
  }

  return React.useMemo(function () {
    if (refs.every(function (ref) {
      return ref == null;
    })) {
      return null;
    }

    return function (node) {
      refs.forEach(function (ref) {
        if (ref) assignRef$1(ref, node);
      });
    };
  }, refs);
}

var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;

var useTimeout = function useTimeout(_ref) {
  var onTimeout = _ref.onTimeout,
      duration = _ref.duration;

  var _useState = React.useState(true),
      activated = _useState[0],
      setActivated = _useState[1];

  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();
      };
    }

    return;
  }, [onTimeout, activated, duration, stopTimeout]);
  var startTimeout = React.useCallback(function () {
    setActivated(true);
  }, []);
  return {
    stopTimeout: stopTimeout,
    startTimeout: startTimeout
  };
};

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;

    case 'medium':
      return generateAlphaColors(color)[700];

    case 'low':
      return generateAlphaColors(color)[500];

    case 'lowest':
      return generateAlphaColors(color)[300];

    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);
};

var ThemeContext = /*#__PURE__*/React__default.createContext(theme);

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);
};

var useTheme = function useTheme() {
  var theme = React.useContext(ThemeContext);

  if (theme === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return theme;
};

var isBrowser$1 = typeof window !== 'undefined';

var isSupported = function isSupported(api) {
  return isBrowser$1 && api in window;
};

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];

  useSafeLayoutEffect(function () {
    if (!isSupported('matchMedia')) return;
    var mediaQueryList = window.matchMedia(query);

    var listener = function listener() {
      return setMatches(mediaQueryList.matches);
    };

    mediaQueryList.addListener(listener);
    listener();
    return function () {
      mediaQueryList.removeListener(listener);
    };
  }, [query]);
  return [matches, setMatches];
}

(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 = {}));

var colorGet = function colorGet(path, fallback) {
  return themeGet.themeGet('colors.' + path, fallback);
};

var colors$1 = function colors(props) {
  var _light, _dark;

  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)
  };
};

var colorModeStyles = function colorModeStyles(props) {
  return colors$1(props)[props.colorMode];
};

var colorMap = function colorMap(props) {
  return Object.keys(colors$1(props)[props.colorMode]);
};

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"]);

    return colorMap(_objectSpread2({
      colorMode: colorMode
    }, rest)).map(function (key) {
      return "--colors-" + key + ": " + colorModeStyles(_objectSpread2({
        colorMode: colorMode
      }, rest))[key] + ";";
    });
  };
};

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  "]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var ColorModes = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject$3(), /*#__PURE__*/generateCssVariables('light'), /*#__PURE__*/generateCssVariables('dark'), /*#__PURE__*/generateCssVariables('light'));

var ColorModeContext = /*#__PURE__*/React__default.createContext({
  colorMode: undefined
});
var ColorModeProvider = function ColorModeProvider(_ref) {
  var colorMode = _ref.colorMode,
      children = _ref.children,
      onChange = _ref.onChange;

  var _React$useState = React__default.useState(colorMode),
      mode = _React$useState[0],
      setMode = _React$useState[1];

  var _useMediaQuery = useMediaQuery('(prefers-color-scheme: dark)'),
      darkmode = _useMediaQuery[0];

  var _useMediaQuery2 = useMediaQuery('(prefers-color-scheme: light)'),
      lightmode = _useMediaQuery2[0];

  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;
    }

    if (mode === 'dark') {
      setColorMode('light');
      return;
    }

    if (!colorMode && darkmode) {
      setColorMode('light');
      return;
    }

    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);
};

var useColorMode = function useColorMode() {
  var _useContext = React.useContext(ColorModeContext),
      colorMode = _useContext.colorMode,
      toggleColorMode = _useContext.toggleColorMode;

  return {
    colorMode: colorMode,
    toggleColorMode: toggleColorMode
  };
};

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'
    }
  }]
};

(function (Prism) {

  function primitive(pattern) {
    return RegExp('([\\s([])' + pattern + '(?=[\\s)])');
  }

  var par = '(\\()';
  var space = '(?=\\s)';
  var language = {
    heading: {
      pattern: /;;;.*/,
      alias: ['comment', 'title']
    },
    comment: /;;.*/,
    string: [{
      pattern: /"(?:[^"\\]|\\.)*"/,
      greedy: true
    }, {
      pattern: /0x[0-9a-fA-F]*/,
      greedy: true
    }],
    symbol: {
      pattern: /'[^()#'\s]+/,
      greedy: true
    },
    keyword: [{
      pattern: /*#__PURE__*/RegExp(par + '(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\
map-get\\?|var-get|contract-map-get\\?|get|tuple|\
define-public|define-private|define-constant|define-map|define-data-var|\
define-fungible-token|define-non-fungible-token|\
define-read-only)' + space),
      lookbehind: true
    }, {
      pattern: /*#__PURE__*/RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space),
      lookbehind: true
    }, {
      pattern: /*#__PURE__*/RegExp(par + '(?:var-set|map-set|map-delete|map-insert|\
ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\
contract-call\\?)' + space),
      lookbehind: true
    }, {
      pattern: /*#__PURE__*/RegExp(par + '(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\
buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + space),
      lookbehind: true
    }, {
      pattern: /*#__PURE__*/RegExp(par + '(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + space),
      lookbehind: true
    }, {
      pattern: /*#__PURE__*/RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space),
      lookbehind: true
    }],
    "boolean": /(?:false|true|none)/,
    number: {
      pattern: /*#__PURE__*/primitive('[-]?u?\\d+'),
      lookbehind: true
    },
    address: {
      pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/,
      lookbehind: true
    },
    operator: {
      pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/,
      lookbehind: true
    },
    "function": {
      pattern: /(\()[^()'\s]+(?=[()\s]|$)/,
      lookbehind: true
    },
    punctuation: /[()']/
  };
  Prism.languages.clarity = language;
})(Prism);

var lineNumberWidth = 60;

var getLineNumber = function getLineNumber(n, length) {
  return startPad(n + 1, length.toString().length);
};

var Tokens = function Tokens(_ref) {
  var tokens = _ref.tokens,
      getTokenProps = _ref.getTokenProps,
      showLineNumbers = _ref.showLineNumbers,
      rest = _objectWithoutPropertiesLoose(_ref, ["tokens", "getTokenProps", "showLineNumbers"]);

  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
    })));
  }));
};

var LineNumber = function LineNumber(_ref2) {
  var number = _ref2.number,
      length = _ref2.length,
      rest = _objectWithoutPropertiesLoose(_ref2, ["number", "length"]);

  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));
};

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"]);

  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
  }));
};

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
    })));
  })));
};

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;
  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';

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,
      rest = _objectWithoutPropertiesLoose(_ref, ["code", "showLineNumbers", "hideLineHover", "style", "language"]);

  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
  }));
});

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;}"]);

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"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$4() {
  var data = _taggedTemplateLiteralLoose(["", ""]);

  _templateObject$4 = function _templateObject() {
    return data;
  };

  return data;
}

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]
    }
  };
};

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);

var FormControlContext = /*#__PURE__*/React.createContext({});
var useFormControlContext = function useFormControlContext() {
  return React.useContext(FormControlContext);
};
var useFormControl = function useFormControl(props) {
  var context = useFormControlContext();

  if (!context) {
    return props;
  }

  var keys = Object.keys(context);
  return keys.reduce(function (acc, prop) {
    acc[prop] = props[prop];

    if (context) {
      if (props[prop] == null) {
        acc[prop] = context[prop];
      }
    }

    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"]);

  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';

var assumeTextStyle = function assumeTextStyle(as) {
  switch (as) {
    case 'h1':
      return 'display.large';

    case 'h2':
      return 'display.small';

    case 'h3':
      return 'body.large.medium';

    default:
      return undefined;
  }
};

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"]);

  return React__default.createElement(Box, Object.assign({
    ref: ref,
    as: as,
    whiteSpace: "unset",
    display: "inline",
    textStyle: textStyle || assumeTextStyle(as)
  }, rest));
});
Text.displayName = 'Text';

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"]);

  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';

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"]);

  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';

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"]);

  return React.createElement(Box, Object.assign({
    as: "svg",
    width: width,
    height: height,
    viewBox: viewBox,
    fill: fill
  }, rest));
};

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"
  }));
};

var rotate = function rotate(direction) {
  if (direction === void 0) {
    direction = 'up';
  }

  switch (direction) {
    case 'up':
      return 0;

    case 'right':
      return '90';

    case 'down':
      return '180';

    case 'left':
      return '270';

    default:
      throw new Error('`rotate` must receive direction parameter');
  }
};

var ArrowIcon = function ArrowIcon(_ref) {
  var direction = _ref.direction,
      style = _ref.style,
      props = _objectWithoutPropertiesLoose(_ref, ["direction", "style"]);

  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"
  }));
};

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"
  }));
};

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'
  }));
};

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"]);

  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"
  }));
};

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"
  })));
};

var rotate$1 = function rotate(direction) {
  if (direction === void 0) {
    direction = 'right';
  }

  switch (direction) {
    case 'left':
      return '90';

    case 'up':
      return '180';

    case 'right':
      return '270';

    case 'down':
      return 0;

    default:
      throw new Error('`rotate` must receive direction parameter');
  }
};

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"]);

  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"
  }));
};

var ConnectLogoIcon = function ConnectLogoIcon(_ref) {
  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
      props = _objectWithoutPropertiesLoose(_ref, ["color"]);

  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"
  }));
};

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"
  }));
};

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"
  }));
};

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"
  })));
};

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'
  }));
};

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"
  }));
};

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)"
  }))));
};

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"
  }));
};

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)"
  }));
};

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"
  })));
};

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"
  }));
};

var FailedIcon = function FailedIcon(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 64 : _ref$size,
      props = _objectWithoutPropertiesLoose(_ref, ["size"]);

  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"
  }));
};

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'
  }
};

var useInputStyle = function useInputStyle(props) {
  return _objectSpread2({
    width: props.isFullWidth ? '100%' : undefined
  }, baseProps$1, {}, defaultStyle);
};

var InputAddon = function InputAddon(_ref) {
  var _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'left' : _ref$placement,
      props = _objectWithoutPropertiesLoose(_ref, ["placement"]);

  var _placement = {
    left: {
      mr: '-1px',
      roundedRight: 0,
      borderRightColor: 'transparent',
      borderLeftWidth: 0
    },
    right: {
      order: 1,
      roundedLeft: 0,
      borderLeftColor: 'transparent',
      borderLeftWidth: 0
    }
  };

  var styleProps = _objectSpread2({}, useInputStyle({
    variant: 'outline'
  }), {
    flex: '0 0 auto',
    whiteSpace: 'nowrap',
    bg: 'white',
    fontSize: 'body.small'
  }, _placement[placement]);

  return React__default.createElement(Box, Object.assign({}, styleProps, props, {
    css: {
      'input:focus + &': {
        zIndex: -1
      }
    }
  }));
};

 InputAddon.propTypes = {
  placement: /*#__PURE__*/propTypes.oneOf(['left', 'right'])
} ;
InputAddon.displayName = 'InputAddon';

var InputLeftAddon = function InputLeftAddon(props) {
  return React__default.createElement(InputAddon, Object.assign({
    placement: "left"
  }, props));
};

var InputRightAddon = function InputRightAddon(props) {
  return React__default.createElement(InputAddon, Object.assign({
    placement: "right"
  }, props));
};

var InputElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _placementProp;

  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"]);

  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';

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"]);

  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';

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"]);

  var _useTheme = useTheme(),
      sizes = _useTheme.sizes;

  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;
    }

    if (child.type === InputLeftElement) {
      pl = sizes[height];
    }

    if (child.type === InputRightElement) {
      pr = sizes[height];
    }

    if (child.type === Input) {
      return React.cloneElement(child, {
        width: '100%',
        pl: child.props.pl || pl,
        pr: child.props.pr || pr
      });
    }

    return React.cloneElement(child, {
      size: size
    });
  }));
};

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;
});

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'
    }
  });
};

var ModalWrapper = function ModalWrapper(_ref4) {
  var isOpen = _ref4.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref4, ["isOpen"]);

  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));
};

var ModalCardContainer = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
  var noAnimation = _ref5.noAnimation,
      isOpen = _ref5.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref5, ["noAnimation", "isOpen"]);

  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"]);

  var _useModalState = useModalState(),
      doCloseModal = _useModalState.doCloseModal;

  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();
        }
      }
    };

    if (isOpen) {
      var _window, _window$document;

      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);
    }

    return function () {
      var _window2, _window2$document;

      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];

  var doOpenModal = function doOpenModal() {
    return !isOpen ? setIsOpen(true) : null;
  };

  var doCloseModal = function doCloseModal() {
    return isOpen ? setIsOpen(false) : null;
  };

  return React__default.createElement(ModalContext.Provider, {
    value: {
      isOpen: isOpen,
      doOpenModal: doOpenModal,
      doCloseModal: doCloseModal
    }
  }, props.children);
};

var oppositeDirections = {
  top: 'bottom',
  bottom: 'top',
  right: 'left',
  left: 'right'
};
var getOppositePosition = function getOppositePosition(position) {
  return oppositeDirections[position];
};

var splitPlacement = function splitPlacement(placement) {
  return placement.split('-');
};

function getArrowStyles(placement, arrowSize) {
  var _ref;

  var _splitPlacement = splitPlacement(placement),
      position = _splitPlacement[0];

  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);

  var _React$useState = React.useState(initialPlacement),
      originalPlacement = _React$useState[0],
      place = _React$useState[1];

  var _React$useState2 = React.useState(initialPlacement),
      placement = _React$useState2[0],
      setPlacement = _React$useState2[1];

  var _React$useState3 = React.useState(offsetProp || [0, gutter]),
      offset = _React$useState3[0];

  var _React$useState4 = React.useState({}),
      popoverStyles = _React$useState4[0],
      setPopoverStyles = _React$useState4[1];

  var _React$useState5 = React.useState({}),
      arrowStyles = _React$useState5[0],
      setArrowStyles = _React$useState5[1];

  var update = React.useCallback(function () {
    if (popper.current) {
      popper.current.forceUpdate();
      return true;
    }

    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;

              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);
          }
        }]
      });
    }

    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;

        (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate();
      }
    });
  }, [forceUpdate]);

  var computedArrowStyles = _objectSpread2({}, arrowStyles, {}, getArrowStyles(placement, arrowSize));

  return {
    popperInstance: popper.current,
    reference: {
      ref: referenceRef
    },
    popper: {
      ref: popoverRef,
      style: popoverStyles
    },
    arrow: {
      ref: arrowRef,
      style: computedArrowStyles
    },
    update: update,
    placement: placement,
    place: place
  };
}

var _createContext = /*#__PURE__*/createContext({
  strict: false
}),
    usePortalManager = _createContext[1];

var _createContext$1 = /*#__PURE__*/createContext({
  strict: false
}),
    PortalCtxProvider = _createContext$1[0],
    usePortalContext = _createContext$1[1];

function Portal(props) {
  var onMount = props.onMount,
      onUnmount = props.onUnmount,
      children = props.children,
      containerProp = props.container;

  var _React$useState = React.useState(function () {
    if (isBrowser) {
      var div = document.createElement('div');
      div.className = 'portal';
      return div;
    }

    return null;
  }),
      portal = _React$useState[0];

  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;

    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;

      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;

  if (!portal) {
    return React.createElement(React.Fragment, null, finalChildren);
  }

  return reactDom.createPortal(React.createElement(PortalCtxProvider, {
    value: portal
  }, finalChildren), portal);
}

{
  Portal.displayName = 'Portal';
}

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"]);

  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;
    }

    if (!Array.isArray(children)) {
      return null;
    }

    var isLastChild = validChildren.length === index + 1;
    var spacingProps = isInline ? {
      mr: isLastChild ? undefined : spacing
    } : {
      mb: isLastChild ? undefined : spacing
    };

    if (shouldWrapChildren) {
      return React__default.createElement(Box, Object.assign({
        d: "inline-block"
      }, spacingProps), child);
    }

    return React.cloneElement(child, spacingProps);
  }));
});
Stack.displayName = 'Stack';

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"]);

  var computedStyle = function computedStyle(state) {
    return _objectSpread2({}, styles.init, {
      transition: transition
    }, styles[state]);
  };

  return React.createElement(CSSTransition, Object.assign({
    appear: true,
    unmountOnExit: true,
    "in": inProp,
    timeout: timeout
  }, rest), function (state) {
    return children(computedStyle(state));
  });
};

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"]);

  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));
};

var getTransitionStyles = function getTransitionStyles(initialScale) {
  return {
    init: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    },
    entered: {
      opacity: 1,
      transform: 'scale(1)'
    },
    exiting: {
      opacity: 0,
      transform: "scale(" + initialScale + ")"
    }
  };
};

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"]);

  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));
};

var createBaseStyle = function createBaseStyle(placement) {
  switch (placement) {
    case 'bottom':
      {
        return {
          maxWidth: '100vw',
          bottom: 0,
          left: 0,
          right: 0
        };
      }

    case 'top':
      {
        return {
          maxWidth: '100vw',
          top: 0,
          left: 0,
          right: 0
        };
      }

    case 'left':
      {
        return {
          width: '100%',
          height: '100vh',
          left: 0,
          top: 0
        };
      }

    case 'right':
      {
        return {
          width: '100%',
          right: 0,
          top: 0,
          height: '100vh'
        };
      }

    default:
      return undefined;
  }
};

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 + ")";
};

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])
    }
  };
};

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"]);

  var styles = getTransitionStyles$1(placement);

  var positionStyles = _objectSpread2({
    position: 'fixed',
    willChange: 'transform'
  }, createBaseStyle(placement));

  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));
  });
}

function getTransitionStyles$2(initialOffset) {
  return {
    init: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    },
    entered: {
      opacity: 1,
      transform: 'translateY(0px)'
    },
    exiting: {
      opacity: 0,
      transform: "translateY(" + initialOffset + ")"
    }
  };
}

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"]);

  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));
};

var toneToIcon = {
  critical: ExclamationMarkCircleIcon,
  positive: CheckmarkCircleIcon,
  none: function none() {
    return null;
  }
};

var Action = function Action(_ref) {
  var label = _ref.label,
      onClick = _ref.onClick,
      removeToast = _ref.removeToast,
      rest = _objectWithoutPropertiesLoose(_ref, ["label", "onClick", "removeToast"]);

  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));
};

var getCustomProps = function getCustomProps(props) {
  var _props, _props2, _props3, _props4, _props5, _props5$icon, _props6, _props7;

  if (props === void 0) {
    props = {};
  }

  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)
  };
};

var CloseButton = function CloseButton(_ref2) {
  var onClick = _ref2.onClick,
      rest = _objectWithoutPropertiesLoose(_ref2, ["onClick"]);

  var _useHover = useEvents.useHover(),
      hover = _useHover[0],
      bind = _useHover[1];

  var _useFocus = useEvents.useFocus(),
      focus = _useFocus[0],
      focusBind = _useFocus[1];

  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'
  }));
};

var Description = function Description(_ref3) {
  var children = _ref3.children,
      rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);

  return React__default.createElement(Text, Object.assign({
    fontSize: "14px",
    style: {
      wordBreak: 'break-word'
    },
    display: "block"
  }, rest), children);
};

var Message = function Message(_ref4) {
  var children = _ref4.children,
      rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);

  return React__default.createElement(Text, Object.assign({
    fontWeight: "600",
    display: "block"
  }, rest), children);
};

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"]);

  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);
};

var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
  var _rect$height;

  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);

  var _React$useState = React__default.useState(true),
      show = _React$useState[0],
      setShow = _React$useState[1];

  var height = (_rect$height = rect$1 === null || rect$1 === void 0 ? void 0 : rect$1.height) !== null && _rect$height !== void 0 ? _rect$height : 0;

  var onExit = function onExit() {
    if (!show) {
      onClear(id);
    }
  };

  var onClose = React__default.useCallback(function () {
    setShow(false);
  }, []);

  var _useTimeout = useTimeout({
    duration: 7200,
    onTimeout: onClose
  }),
      stopTimeout = _useTimeout.stopTimeout,
      startTimeout = _useTimeout.startTimeout;

  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
    }))))));
  });
});

var Toaster = function Toaster(_ref) {
  var toasts = _ref.toasts,
      removeToast = _ref.removeToast,
      rest = _objectWithoutPropertiesLoose(_ref, ["toasts", "removeToast"]);

  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"]);

    return React__default.createElement(Box, {
      key: id
    }, React__default.createElement(Toast, Object.assign({
      id: id,
      onClear: onClear
    }, rest)));
  }));
};

var toastCounter = 0;
var ToastControllerContext = /*#__PURE__*/React.createContext(null);
var QUEUE_TOAST = 0;
var REMOVE_TOAST = 1;

function reducer(state, action) {
  switch (action.type) {
    case QUEUE_TOAST:
      {
        return _objectSpread2({}, state, {
          toasts: [].concat(state.toasts, [action.payload])
        });
      }

    case REMOVE_TOAST:
      {
        var toasts = state.toasts.filter(function (_ref) {
          var id = _ref.id;
          return id !== action.payload;
        });
        return _objectSpread2({}, state, {
          toasts: toasts
        });
      }
  }

  return state;
}

var InternalToastProvider = function InternalToastProvider(_ref2) {
  var children = _ref2.children;

  var _useReducer = React.useReducer(reducer, {
    toasts: []
  }),
      toasts = _useReducer[0].toasts,
      dispatch = _useReducer[1];

  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
  })));
};

var ToastProvider = function ToastProvider(_ref3) {
  var children = _ref3.children;
  var currentContext = React.useContext(ToastControllerContext);

  if (currentContext !== null) {
    return React__default.createElement(React__default.Fragment, null, children);
  }

  return React__default.createElement(InternalToastProvider, null, children);
};
var useToast = function useToast() {
  var addToast = React.useContext(ToastControllerContext);

  if (addToast === null) {
    throw new Error('No "ToastProvider" configured');
  }

  return React.useCallback(function (props) {
    return addToast(_objectSpread2({}, props, {
      id: "" + toastCounter++
    }));
  }, [addToast]);
};

var hideOperation;
var activeId = null;

function show(fn, delay) {
  var _hideOperation;

  var isHidePending = (_hideOperation = hideOperation) === null || _hideOperation === void 0 ? void 0 : _hideOperation.pending();

  if (isHidePending) {
    hideOperation.flush();
  }

  var showOperation = flushable(function () {
    return fn(isHidePending);
  }, isHidePending ? 0 : delay);
  return showOperation.cancel;
}

function hide(fn, delay) {
  hideOperation = flushable(function (flushed) {
    return fn(flushed);
  }, delay);
  return hideOperation.cancel;
}

function useTooltip(props) {
  if (props === void 0) {
    props = {};
  }

  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;

  var _React$useState = React.useState(_label),
      label = _React$useState[0],
      setLabel = _React$useState[1];

  var labelIsUpToDate = _label === label;
  if (!labelIsUpToDate) setLabel(_label);

  var _useDisclosure = useDisclosure({
    isOpen: isOpenProp,
    defaultIsOpen: defaultIsOpen,
    onOpen: onShow,
    onClose: onHide
  }),
      isOpen = _useDisclosure.isOpen,
      open = _useDisclosure.onOpen,
      close = _useDisclosure.onClose;

  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;

      return (_flushRef$current = flushRef.current) === null || _flushRef$current === void 0 ? void 0 : _flushRef$current.call(flushRef);
    };
  }, []);
  var hideImmediately = React.useCallback(function () {
    var _flushRef$current2;

    (_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;

    (_flushRef$current3 = flushRef.current) === null || _flushRef$current3 === void 0 ? void 0 : _flushRef$current3.call(flushRef);

    if (tooltipId !== activeId) {
      hideImmediately();
    }

    activeId = tooltipId;

    if (!isOpen) {
      flushRef.current = show(function () {
        open();
      }, showDelay);
    }
  }, [isOpen, showDelay, open, tooltipId, hideImmediately]);
  var hideTooltip = React.useCallback(function () {
    var _flushRef$current4;

    (_flushRef$current4 = flushRef.current) === null || _flushRef$current4 === void 0 ? void 0 : _flushRef$current4.call(flushRef);
    activeId = null;

    if (isOpen) {
      flushRef.current = hide(function () {
        close();
      }, hideDelay);
    }
  }, [isOpen, hideDelay, close]);
  var onMouseOver = React.useCallback(function (event) {
    var isSelf = event.target === ref.current;

    if (isOpen && isSelf) {
      return;
    }

    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 = {};
      }

      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 = {};
      }

      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 = {};
      }

      return _objectSpread2({}, props, {
        ref: mergeRefs(props.ref, popper.arrow.ref),
        style: _objectSpread2({}, props.style, {}, popper.arrow.style)
      });
    }
  };
}

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"]);

  if (!label || label === '') {
    var child = React.Children.only(children);
    return React.cloneElement(child, _objectSpread2({}, child.props, {}, rest));
  }

  var _useTooltip = useTooltip(props),
      isOpen = _useTooltip.isOpen,
      getTriggerProps = _useTooltip.getTriggerProps,
      getTooltipProps = _useTooltip.getTooltipProps,
      getArrowProps = _useTooltip.getArrowProps;

  var trigger;

  if (isString(children) || shouldWrapChildren) {
    trigger = React.createElement(Box, Object.assign({
      as: "span",
      tabIndex: 0
    }, getTriggerProps()), children);
  } else {
    var _child = React.Children.only(children);

    trigger = React.cloneElement(_child, getTriggerProps(_child.props));
  }

  var hasAriaLabel = Boolean(ariaLabel);
  var baseTooltipProps = getTooltipProps(rest);

  var _ref = hasAriaLabel ? omit(baseTooltipProps, ['role', 'id']) : baseTooltipProps,
      style = _ref.style,
      tooltipProps = _objectWithoutPropertiesLoose(_ref, ["style"]);

  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())))));
}

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);

  if (selected) {
    var _document$getSelectio, _document$getSelectio2;

    (_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);
  }
};

function useClipboard(value) {
  var _useState = React.useState(false),
      hasCopied = _useState[0],
      setHasCopied = _useState[1];

  var onCopy = function onCopy() {
    copyToClipboard(value);
    setHasCopied(true);
    setTimeout(function () {
      return setHasCopied(false);
    }, 1500);
  };

  return {
    value: value,
    onCopy: onCopy,
    hasCopied: hasCopied
  };
}

var nativeExceptions = /*#__PURE__*/[EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError].filter(function (except) {
  return typeof except === 'function';
});

function throwNative(error) {
  for (var _iterator = _createForOfIteratorHelperLoose(nativeExceptions), _step; !(_step = _iterator()).done;) {
    var Exception = _step.value;
    if (error instanceof Exception) throw error;
  }
}

function safeAwait(promise, finallyFn) {
  return promise.then(function (data) {
    if (data instanceof Error) {
      throwNative(data);
      return [data];
    }

    return [undefined, data];
  })["catch"](function (error) {
    throwNative(error);
    return [error];
  })["finally"](function () {
    if (finallyFn) finallyFn();
  });
}

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;
//# sourceMappingURL=ui.cjs.development.js.map