@blockstack/ui
Version:
Blockstack UI components built using React and styled-components with styled-system.
1,747 lines (1,554 loc) • 140 kB
JavaScript
'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 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'
}
}]
};
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: "inlin