Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@theme-ui/components

Package Overview
Dependencies
Maintainers
3
Versions
437
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@theme-ui/components - npm Package Compare versions

Comparing version 0.3.2-alpha.10 to 0.3.2

1266

dist/index.esm.js

@@ -1,2 +0,1 @@

import styled from '@emotion/styled';
import { css, get } from '@theme-ui/css';

@@ -6,20 +5,16 @@ import { createShouldForwardProp } from '@styled-system/should-forward-prop';

import color from '@styled-system/color';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/core';
import React from 'react';
import { keyframes } from '@emotion/core';
var shouldForwardProp = createShouldForwardProp([].concat(space.propNames, color.propNames));
var shouldForwardProp = createShouldForwardProp(( space.propNames ).concat( color.propNames));
var sx = function sx(props) {
return css(props.sx)(props.theme);
};
var sx = function (props) { return css(props.sx)(props.theme); };
var base = function base(props) {
return css(props.__css)(props.theme);
};
var base = function (props) { return css(props.__css)(props.theme); };
var variant = function variant(_ref) {
var theme = _ref.theme,
variant = _ref.variant,
_ref$__themeKey = _ref.__themeKey,
__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
var variant = function (ref) {
var theme = ref.theme;
var variant = ref.variant;
var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';

@@ -35,5 +30,3 @@ return css(get(theme, __themeKey + '.' + variant, get(theme, variant)));

minWidth: 0
}, base, variant, space, color, sx, function (props) {
return props.css;
});
}, base, variant, space, color, sx, function (props) { return props.css; });

@@ -44,419 +37,245 @@ var Flex = styled(Box)({

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
return target;
};
var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
return _extends.apply(this, arguments);
}
var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
var Grid = React.forwardRef(function (ref$1, ref) {
var width = ref$1.width;
var columns = ref$1.columns;
var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
var props = rest;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var px = function px(n) {
return typeof n === 'number' ? n + 'px' : n;
};
var widthToColumns = function widthToColumns(width) {
return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
};
var countToColumns = function countToColumns(n) {
return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
};
var Grid = React.forwardRef(function (_ref, ref) {
var width = _ref.width,
columns = _ref.columns,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 3 : _ref$gap,
props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "grids",
__css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
} }));
});
var Button = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "primary"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
}
}));
});
var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
} })); });
var Link = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "a",
variant: "styles.a"
}, props, {
__themeKey: "links"
}));
});
var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
var Text = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "default"
}, props, {
__themeKey: "text"
}));
});
var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
var Heading = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "h2",
variant: "heading"
}, props, {
__themeKey: "text",
__css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
}
}));
});
var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
} })); });
var Image = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "img"
}, props, {
__themeKey: "images",
__css: _extends({
maxWidth: '100%',
height: 'auto'
}, props.__css)
}));
});
var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
height: 'auto'},
props.__css) })); });
var Card = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "cards"
}));
});
var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
var Label = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "label",
variant: "label"
}, props, {
__themeKey: "forms",
__css: {
width: '100%',
display: 'flex'
}
}));
});
var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
width: '100%',
display: 'flex'
} })); });
var Input = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
variant: "input"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var SVG = (function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var SVG = (function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
var rest = objectWithoutProperties$1( ref, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size + '',
height: size + '',
viewBox: "0 0 24 24",
fill: "currentcolor"
}, props));
return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
});
var getProps = function getProps(test) {
return function (props) {
var next = {};
var getProps = function (test) { return function (props) {
var next = {};
for (var key in props) {
if (test(key || '')) next[key] = props[key];
}
for (var key in props) {
if (test(key || '')) { next[key] = props[key]; }
}
return next;
};
};
return next;
}; };
var MRE = /^m[trblxy]?$/;
var getMargin = getProps(function (k) {
return MRE.test(k);
});
var omitMargin = getProps(function (k) {
return !MRE.test(k);
});
var getMargin = getProps(function (k) { return MRE.test(k); });
var omitMargin = getProps(function (k) { return !MRE.test(k); });
var DownArrow = function DownArrow(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M7 10l5 5 5-5z"
}));
};
var DownArrow = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
); };
var Select = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
sx: {
display: 'flex'
}
}), /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "select",
variant: "select"
}, omitMargin(props), {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
})), /*#__PURE__*/React.createElement(DownArrow, {
sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
}
}));
});
var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
display: 'flex'
} }),
React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })),
React.createElement( DownArrow, { sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
} })
); });
var Textarea = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "textarea",
variant: "textarea"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var RadioChecked = function RadioChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var RadioUnchecked = function RadioUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
var RadioChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function RadioIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var RadioUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( RadioChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Radio = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Radio = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "radio"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: RadioIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
}
}));
} })
);
});
var CheckboxChecked = function CheckboxChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}));
};
function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var CheckboxUnchecked = function CheckboxUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}));
};
var CheckboxChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
); };
var CheckboxIcon = function CheckboxIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
); };
var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Checkbox = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Checkbox = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "checkbox"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: CheckboxIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
}
}));
} })
);
});

@@ -473,91 +292,68 @@

};
var Slider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "range",
variant: "slider"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
}
}));
});
var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
} })); });
var Field = React.forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
Control = _ref$as === void 0 ? Input : _ref$as,
label = _ref.label,
name = _ref.name,
props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Field = React.forwardRef(function (ref$1, ref) {
var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
var label = ref$1.label;
var name = ref$1.name;
var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
htmlFor: name
}, label), /*#__PURE__*/React.createElement(Control, _extends({
ref: ref,
id: name,
name: name
}, omitMargin(props))));
return React.createElement( Box, getMargin(props),
React.createElement( Label, { htmlFor: name }, label),
React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
);
});
var Progress = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "progress",
variant: "styles.progress"
}, props, {
__css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
}
}));
});
var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
} })); });
var Donut = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 128 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
_ref$value = _ref.value,
value = _ref$value === void 0 ? 0 : _ref$value,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 1 : _ref$max,
title = _ref.title,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Donut = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 128;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
var value = ref$1.value; if ( value === void 0 ) value = 0;
var min = ref$1.min; if ( min === void 0 ) min = 0;
var max = ref$1.max; if ( max === void 0 ) max = 1;
var title = ref$1.title;
var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
var props = rest;

@@ -567,34 +363,12 @@ var r = 16 - strokeWidth;

var offset = C - (value - min) / (max - min) * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img",
"aria-valuenow": value,
"aria-valuemin": min,
"aria-valuemax": max
}, props, {
__css: {
color: 'primary'
}
}), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
transform: "rotate(-90 16 16)"
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
color: 'primary'
} }),
title && React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
);
});
function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var spin = keyframes({

@@ -608,12 +382,9 @@ from: {

});
var Spinner = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
_ref$title = _ref.title,
title = _ref$title === void 0 ? 'Loading...' : _ref$title,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 500 : _ref$duration,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
var Spinner = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
var props = rest;

@@ -623,30 +394,9 @@ var r = 16 - strokeWidth;

var offset = C - 1 / 4 * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img"
}, props, {
__css: {
color: 'primary',
overflow: 'visible'
}
}), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement(Box, {
as: "circle",
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
__css: {
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
color: 'primary',
overflow: 'visible'
} }),
React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
transformOrigin: '50% 50%',

@@ -657,295 +407,193 @@ animationName: spin.toString(),

animationIterationCount: 'infinite'
}
}));
} })
);
});
var Avatar = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Avatar = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var rest = objectWithoutProperties$7( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Image, _extends({
ref: ref,
width: size,
height: size,
variant: "avatar"
}, props, {
__css: {
borderRadius: 9999
}
}));
return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
borderRadius: 9999
} }));
});
var Badge = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "badges",
__css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
}
}));
});
var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "badges", __css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
} })); });
var IconButton = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 32 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var IconButton = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 32;
var rest = objectWithoutProperties$8( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "icon"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
} }));
});
var x = /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
fill: "currentcolor",
viewBox: "0 0 24 24"
}, /*#__PURE__*/React.createElement("path", {
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
}));
var Close = React.forwardRef(function (_ref, ref) {
var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
);
var Close = React.forwardRef(function (ref$1, ref) {
var rest = objectWithoutProperties$9( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Close",
"aria-label": "Close",
variant: "close"
}, props, {
children: x
}));
return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
});
var Alert = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "alerts",
__css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
}
}));
});
var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "alerts", __css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
} })); });
var Divider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "hr",
variant: "styles.hr"
}, props, {
__css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
}
}));
});
var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
} })); });
var Embed = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
src = _ref.src,
_ref$frameBorder = _ref.frameBorder,
frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
_ref$allowFullScreen = _ref.allowFullScreen,
allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 560 : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 315 : _ref$height,
allow = _ref.allow,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Embed = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
var src = ref$1.src;
var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
var width = ref$1.width; if ( width === void 0 ) width = 560;
var height = ref$1.height; if ( height === void 0 ) height = 315;
var allow = ref$1.allow;
var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
}
}), /*#__PURE__*/React.createElement(Box, {
ref: ref,
as: "iframe",
src: src,
width: width,
height: height,
frameBorder: frameBorder,
allowFullScreen: allowFullScreen,
allow: allow,
__css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}));
return React.createElement( Box, Object.assign({}, props, { __css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
} }),
React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
} })
);
});
var AspectRatio = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectRatio = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
var children = ref$1.children;
var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, {
ref: ref,
sx: {
position: 'relative',
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Box, {
sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
}
}), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), children));
return React.createElement( Box, { ref: ref, sx: {
position: 'relative',
overflow: 'hidden'
} },
React.createElement( Box, { sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
} }),
React.createElement( Box, Object.assign({}, props, { __css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
} }),
children
)
);
});
var AspectImage = React.forwardRef(function (_ref, ref) {
var ratio = _ref.ratio,
props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectImage = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio;
var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
var props = rest;
return /*#__PURE__*/React.createElement(AspectRatio, {
ratio: ratio
}, /*#__PURE__*/React.createElement(Image, _extends({
ref: ref
}, props, {
__css: {
objectFit: 'cover'
}
})));
return React.createElement( AspectRatio, { ratio: ratio },
React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
objectFit: 'cover'
} }))
);
});
var Container = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "container"
}, props, {
__themeKey: "layout",
__css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
}
}));
});
var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
} })); });
var NavLink = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Link, _extends({
ref: ref,
variant: "nav"
}, props, {
__css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
}
}));
});
var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
} })); });
var Message = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "messages",
__css: {
padding: 3,
paddingLeft: function paddingLeft(t) {
return t.space[3] - t.space[1];
},
borderLeftWidth: function borderLeftWidth(t) {
return t.space[1];
},
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
}
}));
});
var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
padding: 3,
paddingLeft: function (t) { return t.space[3] - t.space[1]; },
borderLeftWidth: function (t) { return t.space[1]; },
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
} })); });
var MenuIcon = function MenuIcon(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size;
return /*#__PURE__*/React.createElement(Box, {
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size,
height: size,
fill: "currentcolor",
viewBox: "0 0 24 24",
sx: {
display: 'block',
margin: 0
}
}, /*#__PURE__*/React.createElement("path", {
d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
}));
var MenuIcon = function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
display: 'block',
margin: 0
} },
React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
);
};
var MenuButton = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Menu",
"aria-label": "Toggle Menu",
variant: "menu"
}, props), /*#__PURE__*/React.createElement(MenuIcon, null));
});
var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
React.createElement( MenuIcon, null )
); });
export { Alert, AspectImage, AspectRatio, Avatar, Badge, Box, Button, Card, Checkbox, Close, Container, Divider, Donut, Embed, Field, Flex, Grid, Heading, IconButton, Image, Input, Label, Link, MenuButton, Message, NavLink, Progress, Radio, Select, Slider, Spinner, Text, Textarea };
export { Box, Flex, Grid, Button, Link, Text, Heading, Image, Card, Label, Input, Select, Textarea, Radio, Checkbox, Slider, Field, Progress, Donut, Spinner, Avatar, Badge, Close, Alert, Divider, Embed, AspectRatio, AspectImage, Container, NavLink, Message, IconButton, MenuButton };
//# sourceMappingURL=index.esm.js.map

1316

dist/index.js
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var styled = _interopDefault(require('@emotion/styled'));
var css = require('@theme-ui/css');
var shouldForwardProp$1 = require('@styled-system/should-forward-prop');
var shouldForwardProp = require('@styled-system/should-forward-prop');
var space = _interopDefault(require('@styled-system/space'));
var color = _interopDefault(require('@styled-system/color'));
var styled = _interopDefault(require('@emotion/styled'));
var core = require('@emotion/core');
var React = _interopDefault(require('react'));
var core = require('@emotion/core');
var shouldForwardProp = shouldForwardProp$1.createShouldForwardProp([].concat(space.propNames, color.propNames));
var shouldForwardProp$1 = shouldForwardProp.createShouldForwardProp(( space.propNames ).concat( color.propNames));
var sx = function sx(props) {
return css.css(props.sx)(props.theme);
};
var sx = function (props) { return css.css(props.sx)(props.theme); };
var base = function base(props) {
return css.css(props.__css)(props.theme);
};
var base = function (props) { return css.css(props.__css)(props.theme); };
var variant = function variant(_ref) {
var theme = _ref.theme,
variant = _ref.variant,
_ref$__themeKey = _ref.__themeKey,
__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
var variant = function (ref) {
var theme = ref.theme;
var variant = ref.variant;
var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';

@@ -31,3 +26,3 @@ return css.css(css.get(theme, __themeKey + '.' + variant, css.get(theme, variant)));

var Box = styled('div', {
shouldForwardProp: shouldForwardProp
shouldForwardProp: shouldForwardProp$1
})({

@@ -37,5 +32,3 @@ boxSizing: 'border-box',

minWidth: 0
}, base, variant, space, color, sx, function (props) {
return props.css;
});
}, base, variant, space, color, sx, function (props) { return props.css; });

@@ -46,419 +39,245 @@ var Flex = styled(Box)({

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
return target;
};
var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
return _extends.apply(this, arguments);
}
var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
var Grid = React.forwardRef(function (ref$1, ref) {
var width = ref$1.width;
var columns = ref$1.columns;
var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
var props = rest;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var px = function px(n) {
return typeof n === 'number' ? n + 'px' : n;
};
var widthToColumns = function widthToColumns(width) {
return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
};
var countToColumns = function countToColumns(n) {
return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
};
var Grid = React.forwardRef(function (_ref, ref) {
var width = _ref.width,
columns = _ref.columns,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 3 : _ref$gap,
props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "grids",
__css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
} }));
});
var Button = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "primary"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
}
}));
});
var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
} })); });
var Link = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "a",
variant: "styles.a"
}, props, {
__themeKey: "links"
}));
});
var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
var Text = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "default"
}, props, {
__themeKey: "text"
}));
});
var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
var Heading = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "h2",
variant: "heading"
}, props, {
__themeKey: "text",
__css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
}
}));
});
var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
} })); });
var Image = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "img"
}, props, {
__themeKey: "images",
__css: _extends({
maxWidth: '100%',
height: 'auto'
}, props.__css)
}));
});
var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
height: 'auto'},
props.__css) })); });
var Card = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "cards"
}));
});
var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
var Label = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "label",
variant: "label"
}, props, {
__themeKey: "forms",
__css: {
width: '100%',
display: 'flex'
}
}));
});
var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
width: '100%',
display: 'flex'
} })); });
var Input = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
variant: "input"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var SVG = (function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var SVG = (function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
var rest = objectWithoutProperties$1( ref, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size + '',
height: size + '',
viewBox: "0 0 24 24",
fill: "currentcolor"
}, props));
return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
});
var getProps = function getProps(test) {
return function (props) {
var next = {};
var getProps = function (test) { return function (props) {
var next = {};
for (var key in props) {
if (test(key || '')) next[key] = props[key];
}
for (var key in props) {
if (test(key || '')) { next[key] = props[key]; }
}
return next;
};
};
return next;
}; };
var MRE = /^m[trblxy]?$/;
var getMargin = getProps(function (k) {
return MRE.test(k);
});
var omitMargin = getProps(function (k) {
return !MRE.test(k);
});
var getMargin = getProps(function (k) { return MRE.test(k); });
var omitMargin = getProps(function (k) { return !MRE.test(k); });
var DownArrow = function DownArrow(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M7 10l5 5 5-5z"
}));
};
var DownArrow = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
); };
var Select = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
sx: {
display: 'flex'
}
}), /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "select",
variant: "select"
}, omitMargin(props), {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
})), /*#__PURE__*/React.createElement(DownArrow, {
sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
}
}));
});
var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
display: 'flex'
} }),
React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })),
React.createElement( DownArrow, { sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
} })
); });
var Textarea = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "textarea",
variant: "textarea"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var RadioChecked = function RadioChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var RadioUnchecked = function RadioUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
var RadioChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function RadioIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var RadioUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( RadioChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Radio = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Radio = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "radio"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: RadioIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
}
}));
} })
);
});
var CheckboxChecked = function CheckboxChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}));
};
function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var CheckboxUnchecked = function CheckboxUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}));
};
var CheckboxChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
); };
var CheckboxIcon = function CheckboxIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
); };
var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Checkbox = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Checkbox = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "checkbox"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: CheckboxIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
}
}));
} })
);
});

@@ -475,91 +294,68 @@

};
var Slider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "range",
variant: "slider"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
}
}));
});
var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
} })); });
var Field = React.forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
Control = _ref$as === void 0 ? Input : _ref$as,
label = _ref.label,
name = _ref.name,
props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Field = React.forwardRef(function (ref$1, ref) {
var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
var label = ref$1.label;
var name = ref$1.name;
var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
htmlFor: name
}, label), /*#__PURE__*/React.createElement(Control, _extends({
ref: ref,
id: name,
name: name
}, omitMargin(props))));
return React.createElement( Box, getMargin(props),
React.createElement( Label, { htmlFor: name }, label),
React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
);
});
var Progress = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "progress",
variant: "styles.progress"
}, props, {
__css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
}
}));
});
var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
} })); });
var Donut = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 128 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
_ref$value = _ref.value,
value = _ref$value === void 0 ? 0 : _ref$value,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 1 : _ref$max,
title = _ref.title,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Donut = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 128;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
var value = ref$1.value; if ( value === void 0 ) value = 0;
var min = ref$1.min; if ( min === void 0 ) min = 0;
var max = ref$1.max; if ( max === void 0 ) max = 1;
var title = ref$1.title;
var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
var props = rest;

@@ -569,34 +365,12 @@ var r = 16 - strokeWidth;

var offset = C - (value - min) / (max - min) * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img",
"aria-valuenow": value,
"aria-valuemin": min,
"aria-valuemax": max
}, props, {
__css: {
color: 'primary'
}
}), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
transform: "rotate(-90 16 16)"
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
color: 'primary'
} }),
title && React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
);
});
function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var spin = core.keyframes({

@@ -610,12 +384,9 @@ from: {

});
var Spinner = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
_ref$title = _ref.title,
title = _ref$title === void 0 ? 'Loading...' : _ref$title,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 500 : _ref$duration,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
var Spinner = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
var props = rest;

@@ -625,30 +396,9 @@ var r = 16 - strokeWidth;

var offset = C - 1 / 4 * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img"
}, props, {
__css: {
color: 'primary',
overflow: 'visible'
}
}), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement(Box, {
as: "circle",
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
__css: {
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
color: 'primary',
overflow: 'visible'
} }),
React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
transformOrigin: '50% 50%',

@@ -659,327 +409,225 @@ animationName: spin.toString(),

animationIterationCount: 'infinite'
}
}));
} })
);
});
var Avatar = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Avatar = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var rest = objectWithoutProperties$7( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Image, _extends({
ref: ref,
width: size,
height: size,
variant: "avatar"
}, props, {
__css: {
borderRadius: 9999
}
}));
return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
borderRadius: 9999
} }));
});
var Badge = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "badges",
__css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
}
}));
});
var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "badges", __css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
} })); });
var IconButton = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 32 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var IconButton = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 32;
var rest = objectWithoutProperties$8( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "icon"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
} }));
});
var x = /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
fill: "currentcolor",
viewBox: "0 0 24 24"
}, /*#__PURE__*/React.createElement("path", {
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
}));
var Close = React.forwardRef(function (_ref, ref) {
var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
);
var Close = React.forwardRef(function (ref$1, ref) {
var rest = objectWithoutProperties$9( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Close",
"aria-label": "Close",
variant: "close"
}, props, {
children: x
}));
return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
});
var Alert = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "alerts",
__css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
}
}));
});
var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "alerts", __css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
} })); });
var Divider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "hr",
variant: "styles.hr"
}, props, {
__css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
}
}));
});
var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
} })); });
var Embed = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
src = _ref.src,
_ref$frameBorder = _ref.frameBorder,
frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
_ref$allowFullScreen = _ref.allowFullScreen,
allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 560 : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 315 : _ref$height,
allow = _ref.allow,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Embed = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
var src = ref$1.src;
var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
var width = ref$1.width; if ( width === void 0 ) width = 560;
var height = ref$1.height; if ( height === void 0 ) height = 315;
var allow = ref$1.allow;
var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
}
}), /*#__PURE__*/React.createElement(Box, {
ref: ref,
as: "iframe",
src: src,
width: width,
height: height,
frameBorder: frameBorder,
allowFullScreen: allowFullScreen,
allow: allow,
__css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}));
return React.createElement( Box, Object.assign({}, props, { __css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
} }),
React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
} })
);
});
var AspectRatio = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectRatio = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
var children = ref$1.children;
var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, {
ref: ref,
sx: {
position: 'relative',
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Box, {
sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
}
}), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), children));
return React.createElement( Box, { ref: ref, sx: {
position: 'relative',
overflow: 'hidden'
} },
React.createElement( Box, { sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
} }),
React.createElement( Box, Object.assign({}, props, { __css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
} }),
children
)
);
});
var AspectImage = React.forwardRef(function (_ref, ref) {
var ratio = _ref.ratio,
props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectImage = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio;
var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
var props = rest;
return /*#__PURE__*/React.createElement(AspectRatio, {
ratio: ratio
}, /*#__PURE__*/React.createElement(Image, _extends({
ref: ref
}, props, {
__css: {
objectFit: 'cover'
}
})));
return React.createElement( AspectRatio, { ratio: ratio },
React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
objectFit: 'cover'
} }))
);
});
var Container = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "container"
}, props, {
__themeKey: "layout",
__css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
}
}));
});
var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
} })); });
var NavLink = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Link, _extends({
ref: ref,
variant: "nav"
}, props, {
__css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
}
}));
});
var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
} })); });
var Message = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "messages",
__css: {
padding: 3,
paddingLeft: function paddingLeft(t) {
return t.space[3] - t.space[1];
},
borderLeftWidth: function borderLeftWidth(t) {
return t.space[1];
},
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
}
}));
});
var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
padding: 3,
paddingLeft: function (t) { return t.space[3] - t.space[1]; },
borderLeftWidth: function (t) { return t.space[1]; },
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
} })); });
var MenuIcon = function MenuIcon(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size;
return /*#__PURE__*/React.createElement(Box, {
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size,
height: size,
fill: "currentcolor",
viewBox: "0 0 24 24",
sx: {
display: 'block',
margin: 0
}
}, /*#__PURE__*/React.createElement("path", {
d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
}));
var MenuIcon = function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
display: 'block',
margin: 0
} },
React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
);
};
var MenuButton = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Menu",
"aria-label": "Toggle Menu",
variant: "menu"
}, props), /*#__PURE__*/React.createElement(MenuIcon, null));
});
var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
React.createElement( MenuIcon, null )
); });
exports.Alert = Alert;
exports.AspectImage = AspectImage;
exports.AspectRatio = AspectRatio;
exports.Avatar = Avatar;
exports.Badge = Badge;
exports.Box = Box;
exports.Flex = Flex;
exports.Grid = Grid;
exports.Button = Button;
exports.Link = Link;
exports.Text = Text;
exports.Heading = Heading;
exports.Image = Image;
exports.Card = Card;
exports.Label = Label;
exports.Input = Input;
exports.Select = Select;
exports.Textarea = Textarea;
exports.Radio = Radio;
exports.Checkbox = Checkbox;
exports.Slider = Slider;
exports.Field = Field;
exports.Progress = Progress;
exports.Donut = Donut;
exports.Spinner = Spinner;
exports.Avatar = Avatar;
exports.Badge = Badge;
exports.Close = Close;
exports.Container = Container;
exports.Alert = Alert;
exports.Divider = Divider;
exports.Donut = Donut;
exports.Embed = Embed;
exports.Field = Field;
exports.Flex = Flex;
exports.Grid = Grid;
exports.Heading = Heading;
exports.AspectRatio = AspectRatio;
exports.AspectImage = AspectImage;
exports.Container = Container;
exports.NavLink = NavLink;
exports.Message = Message;
exports.IconButton = IconButton;
exports.Image = Image;
exports.Input = Input;
exports.Label = Label;
exports.Link = Link;
exports.MenuButton = MenuButton;
exports.Message = Message;
exports.NavLink = NavLink;
exports.Progress = Progress;
exports.Radio = Radio;
exports.Select = Select;
exports.Slider = Slider;
exports.Spinner = Spinner;
exports.Text = Text;
exports.Textarea = Textarea;
//# sourceMappingURL=index.js.map

643

dist/index.modern.js

@@ -33,51 +33,17 @@ import styled from '@emotion/styled';

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
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;
}
const px = n => typeof n === 'number' ? n + 'px' : n;
const widthToColumns = width => Array.isArray(width) ? width.map(widthToColumns) : !!width && `repeat(auto-fit, minmax(${px(width)}, 1fr))`;
const widthToColumns = (width, repeat) => Array.isArray(width) ? width.map(w => widthToColumns(w, repeat)) : !!width && `repeat(auto-${repeat}, minmax(${px(width)}, 1fr))`;
const countToColumns = n => Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? `repeat(${n}, 1fr)` : n);
const Grid = React.forwardRef((_ref, ref) => {
let {
width,
columns,
gap = 3
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
const gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
return /*#__PURE__*/React.createElement(Box, _extends({
const Grid = React.forwardRef(({
width,
columns,
gap: _gap = 3,
repeat: _repeat = 'fit',
...props
}, ref) => {
const gridTemplateColumns = !!width ? widthToColumns(width, _repeat) : countToColumns(columns);
return /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref

@@ -88,3 +54,3 @@ }, props, {

display: 'grid',
gridGap: gap,
gridGap: _gap,
gridTemplateColumns

@@ -95,3 +61,3 @@ }

const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -118,3 +84,3 @@ as: "button",

const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -127,3 +93,3 @@ as: "a",

const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -135,3 +101,3 @@ variant: "default"

const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -149,3 +115,3 @@ as: "h2",

const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -155,9 +121,10 @@ as: "img"

__themeKey: "images",
__css: _extends({
__css: {
maxWidth: '100%',
height: 'auto'
}, props.__css)
height: 'auto',
...props.__css
}
})));
const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -169,3 +136,3 @@ variant: "primary"

const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -182,3 +149,3 @@ as: "label",

const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -203,18 +170,14 @@ as: "input",

var SVG = ((_ref) => {
let {
size = 24
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
var SVG = (({
size: _size = 24,
...props
}) => /*#__PURE__*/React.createElement(Box, Object.assign({
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: _size + '',
height: _size + '',
viewBox: "0 0 24 24",
fill: "currentcolor"
}, props)));
return /*#__PURE__*/React.createElement(Box, _extends({
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size + '',
height: size + '',
viewBox: "0 0 24 24",
fill: "currentcolor"
}, props));
});
const getProps = test => props => {

@@ -237,7 +200,7 @@ const next = {};

const Select = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
const Select = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({}, getMargin(props), {
sx: {
display: 'flex'
}
}), /*#__PURE__*/React.createElement(Box, _extends({
}), /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -268,3 +231,3 @@ as: "select",

const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -297,3 +260,3 @@ as: "textarea",

const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, Object.assign({}, props, {
__css: {

@@ -305,3 +268,3 @@ display: 'none',

}
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
})), /*#__PURE__*/React.createElement(RadioUnchecked, Object.assign({}, props, {
__css: {

@@ -315,44 +278,41 @@ display: 'block',

const Radio = React.forwardRef((_ref, ref) => {
let {
className,
sx,
variant = 'radio'
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "radio"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
const Radio = React.forwardRef(({
className,
sx,
variant: _variant = 'radio',
...props
}, ref) => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,
as: "input",
type: "radio"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
}
})), /*#__PURE__*/React.createElement(Box, {
as: RadioIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: _variant,
className: className,
sx: sx,
__css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
flexShrink: 0,
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: RadioIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
}
}));
});
}
})));

@@ -367,3 +327,3 @@ const CheckboxChecked = props => /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {

const CheckboxIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
const CheckboxIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, Object.assign({}, props, {
__css: {

@@ -375,3 +335,3 @@ display: 'none',

}
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, Object.assign({}, props, {
__css: {

@@ -385,44 +345,42 @@ display: 'block',

const Checkbox = React.forwardRef((_ref, ref) => {
let {
className,
sx,
variant = 'checkbox'
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "checkbox"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
const Checkbox = React.forwardRef(({
className,
sx,
variant: _variant = 'checkbox',
children,
...props
}, ref) => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,
as: "input",
type: "checkbox"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
}
})), /*#__PURE__*/React.createElement(Box, {
as: CheckboxIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: _variant,
className: className,
sx: sx,
__css: {
mr: 2,
borderRadius: 4,
color: 'gray',
flexShrink: 0,
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: CheckboxIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
}
}));
});
}
}), children));

@@ -438,3 +396,3 @@ const thumb = {

};
const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -466,13 +424,11 @@ as: "input",

const Field = React.forwardRef((_ref, ref) => {
let {
as: Control = Input,
label,
name
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
const Field = React.forwardRef(({
as: Control = Input,
label,
name,
...props
}, ref) => {
return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
htmlFor: name
}, label), /*#__PURE__*/React.createElement(Control, _extends({
}, label), /*#__PURE__*/React.createElement(Control, Object.assign({
ref: ref,

@@ -484,3 +440,3 @@ id: name,

const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -514,29 +470,27 @@ as: "progress",

const Donut = React.forwardRef((_ref, ref) => {
let {
size = 128,
strokeWidth = 2,
value = 0,
min = 0,
max = 1,
title
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
const r = 16 - strokeWidth;
const Donut = React.forwardRef(({
size: _size = 128,
strokeWidth: _strokeWidth = 2,
value: _value = 0,
min: _min = 0,
max: _max = 1,
title,
...props
}, ref) => {
const r = 16 - _strokeWidth;
const C = 2 * r * Math.PI;
const offset = C - (value - min) / (max - min) * C;
return /*#__PURE__*/React.createElement(Box, _extends({
const offset = C - (_value - _min) / (_max - _min) * C;
return /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
width: _size,
height: _size,
strokeWidth: _strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img",
"aria-valuenow": value,
"aria-valuemin": min,
"aria-valuemax": max
"aria-valuenow": _value,
"aria-valuemin": _min,
"aria-valuemax": _max
}, props, {

@@ -569,22 +523,20 @@ __css: {

});
const Spinner = React.forwardRef((_ref, ref) => {
let {
size = 48,
strokeWidth = 4,
max = 1,
title = 'Loading...',
duration = 500
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
const r = 16 - strokeWidth;
const Spinner = React.forwardRef(({
size: _size = 48,
strokeWidth: _strokeWidth = 4,
max: _max = 1,
title: _title = 'Loading...',
duration: _duration = 500,
...props
}, ref) => {
const r = 16 - _strokeWidth;
const C = 2 * r * Math.PI;
const offset = C - 1 / 4 * C;
return /*#__PURE__*/React.createElement(Box, _extends({
return /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
width: _size,
height: _size,
strokeWidth: _strokeWidth,
fill: "none",

@@ -598,3 +550,3 @@ stroke: "currentcolor",

}
}), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
}), /*#__PURE__*/React.createElement("title", null, _title), /*#__PURE__*/React.createElement("circle", {
cx: 16,

@@ -615,3 +567,3 @@ cy: 16,

animationTimingFunction: 'linear',
animationDuration: duration + 'ms',
animationDuration: _duration + 'ms',
animationIterationCount: 'infinite'

@@ -622,21 +574,17 @@ }

const Avatar = React.forwardRef((_ref, ref) => {
let {
size = 48
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
const Avatar = React.forwardRef(({
size: _size = 48,
...props
}, ref) => /*#__PURE__*/React.createElement(Image, Object.assign({
ref: ref,
width: _size,
height: _size,
variant: "avatar"
}, props, {
__css: {
borderRadius: 9999
}
})));
return /*#__PURE__*/React.createElement(Image, _extends({
ref: ref,
width: size,
height: size,
variant: "avatar"
}, props, {
__css: {
borderRadius: 9999
}
}));
});
const Badge = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Badge = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -659,30 +607,26 @@ variant: "primary"

const IconButton = React.forwardRef((_ref, ref) => {
let {
size = 32
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
const IconButton = React.forwardRef(({
size: _size = 32,
...props
}, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,
as: "button",
variant: "icon"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: _size,
height: _size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
}
})));
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "icon"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
}
}));
});
const x = /*#__PURE__*/React.createElement("svg", {

@@ -697,16 +641,15 @@ xmlns: "http://www.w3.org/2000/svg",

}));
const Close = React.forwardRef((_ref, ref) => {
let props = _objectWithoutPropertiesLoose(_ref, ["size"]);
const Close = React.forwardRef(({
size: _size = 32,
...props
}, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({
ref: ref,
title: "Close",
"aria-label": "Close",
variant: "close"
}, props, {
children: x
})));
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Close",
"aria-label": "Close",
variant: "close"
}, props, {
children: x
}));
});
const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -728,3 +671,3 @@ variant: "primary"

const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -743,91 +686,79 @@ as: "hr",

const Embed = React.forwardRef((_ref, ref) => {
let {
ratio = 16 / 9,
src,
frameBorder = 0,
allowFullScreen = true,
width = 560,
height = 315,
allow
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
const Embed = React.forwardRef(({
ratio: _ratio = 16 / 9,
src,
frameBorder: _frameBorder = 0,
allowFullScreen: _allowFullScreen = true,
width: _width = 560,
height: _height = 315,
allow,
...props
}, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
__css: {
width: '100%',
height: 0,
paddingBottom: 100 / _ratio + '%',
position: 'relative',
overflow: 'hidden'
}
}), /*#__PURE__*/React.createElement(Box, {
ref: ref,
as: "iframe",
src: src,
width: _width,
height: _height,
frameBorder: _frameBorder,
allowFullScreen: _allowFullScreen,
allow: allow,
__css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
})));
return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
}
}), /*#__PURE__*/React.createElement(Box, {
ref: ref,
as: "iframe",
src: src,
width: width,
height: height,
frameBorder: frameBorder,
allowFullScreen: allowFullScreen,
allow: allow,
__css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}));
});
const AspectRatio = React.forwardRef(({
ratio: _ratio = 4 / 3,
children,
...props
}, ref) => /*#__PURE__*/React.createElement(Box, {
ref: ref,
sx: {
position: 'relative',
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Box, {
sx: {
width: '100%',
height: 0,
paddingBottom: 100 / _ratio + '%'
}
}), /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
__css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), children)));
const AspectRatio = React.forwardRef((_ref, ref) => {
let {
ratio = 4 / 3,
children
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
const AspectImage = React.forwardRef(({
ratio,
...props
}, ref) => /*#__PURE__*/React.createElement(AspectRatio, {
ratio: ratio
}, /*#__PURE__*/React.createElement(Image, Object.assign({
ref: ref
}, props, {
__css: {
objectFit: 'cover'
}
}))));
return /*#__PURE__*/React.createElement(Box, {
ref: ref,
sx: {
position: 'relative',
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Box, {
sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
}
}), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), children));
});
const AspectImage = React.forwardRef((_ref, ref) => {
let {
ratio
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
return /*#__PURE__*/React.createElement(AspectRatio, {
ratio: ratio
}, /*#__PURE__*/React.createElement(Image, _extends({
ref: ref
}, props, {
__css: {
objectFit: 'cover'
}
})));
});
const Container = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Container = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref,

@@ -844,3 +775,3 @@ variant: "container"

const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, _extends({
const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, Object.assign({
ref: ref,

@@ -860,3 +791,3 @@ variant: "nav"

const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({
const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({
ref: ref

@@ -892,3 +823,3 @@ }, props, {

}));
const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, _extends({
const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({
ref: ref,

@@ -895,0 +826,0 @@ title: "Menu",

1326

dist/index.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled'), require('@theme-ui/css'), require('@styled-system/should-forward-prop'), require('@styled-system/space'), require('@styled-system/color'), require('react'), require('@emotion/core')) :
typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled', '@theme-ui/css', '@styled-system/should-forward-prop', '@styled-system/space', '@styled-system/color', 'react', '@emotion/core'], factory) :
(global = global || self, factory(global.components = {}, global.styled, global.css, global.shouldForwardProp$1, global.space, global.color, global.react, global.core));
}(this, (function (exports, styled, css, shouldForwardProp$1, space, color, React, core) {
styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
space = space && Object.prototype.hasOwnProperty.call(space, 'default') ? space['default'] : space;
color = color && Object.prototype.hasOwnProperty.call(color, 'default') ? color['default'] : color;
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@theme-ui/css'), require('@styled-system/should-forward-prop'), require('@styled-system/space'), require('@styled-system/color'), require('@emotion/styled'), require('@emotion/core'), require('react')) :
typeof define === 'function' && define.amd ? define(['exports', '@theme-ui/css', '@styled-system/should-forward-prop', '@styled-system/space', '@styled-system/color', '@emotion/styled', '@emotion/core', 'react'], factory) :
(factory((global.components = {}),global.css,global.shouldForwardProp,global.space,global.color,global.styled,global.core,global.react));
}(this, (function (exports,css,shouldForwardProp,space,color,styled,core,React) {
space = space && space.hasOwnProperty('default') ? space['default'] : space;
color = color && color.hasOwnProperty('default') ? color['default'] : color;
styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
React = React && React.hasOwnProperty('default') ? React['default'] : React;
var shouldForwardProp = shouldForwardProp$1.createShouldForwardProp([].concat(space.propNames, color.propNames));
var shouldForwardProp$1 = shouldForwardProp.createShouldForwardProp(( space.propNames ).concat( color.propNames));
var sx = function sx(props) {
return css.css(props.sx)(props.theme);
};
var sx = function (props) { return css.css(props.sx)(props.theme); };
var base = function base(props) {
return css.css(props.__css)(props.theme);
};
var base = function (props) { return css.css(props.__css)(props.theme); };
var variant = function variant(_ref) {
var theme = _ref.theme,
variant = _ref.variant,
_ref$__themeKey = _ref.__themeKey,
__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey;
var variant = function (ref) {
var theme = ref.theme;
var variant = ref.variant;
var __themeKey = ref.__themeKey; if ( __themeKey === void 0 ) __themeKey = 'variants';

@@ -31,3 +26,3 @@ return css.css(css.get(theme, __themeKey + '.' + variant, css.get(theme, variant)));

var Box = styled('div', {
shouldForwardProp: shouldForwardProp
shouldForwardProp: shouldForwardProp$1
})({

@@ -37,5 +32,3 @@ boxSizing: 'border-box',

minWidth: 0
}, base, variant, space, color, sx, function (props) {
return props.css;
});
}, base, variant, space, color, sx, function (props) { return props.css; });

@@ -46,419 +39,245 @@ var Flex = styled(Box)({

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var px = function (n) { return typeof n === 'number' ? n + 'px' : n; };
return target;
};
var widthToColumns = function (width) { return Array.isArray(width) ? width.map(widthToColumns) : !!width && ("repeat(auto-fit, minmax(" + (px(width)) + ", 1fr))"); };
return _extends.apply(this, arguments);
}
var countToColumns = function (n) { return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? ("repeat(" + n + ", 1fr)") : n); };
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
var Grid = React.forwardRef(function (ref$1, ref) {
var width = ref$1.width;
var columns = ref$1.columns;
var gap = ref$1.gap; if ( gap === void 0 ) gap = 3;
var rest = objectWithoutProperties( ref$1, ["width", "columns", "gap"] );
var props = rest;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var px = function px(n) {
return typeof n === 'number' ? n + 'px' : n;
};
var widthToColumns = function widthToColumns(width) {
return Array.isArray(width) ? width.map(widthToColumns) : !!width && "repeat(auto-fit, minmax(" + px(width) + ", 1fr))";
};
var countToColumns = function countToColumns(n) {
return Array.isArray(n) ? n.map(countToColumns) : !!n && (typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n);
};
var Grid = React.forwardRef(function (_ref, ref) {
var width = _ref.width,
columns = _ref.columns,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 3 : _ref$gap,
props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap"]);
var gridTemplateColumns = !!width ? widthToColumns(width) : countToColumns(columns);
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "grids",
__css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "grids", __css: {
display: 'grid',
gridGap: gap,
gridTemplateColumns: gridTemplateColumns
} }));
});
var Button = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "primary"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
}
}));
});
var Button = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "primary" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
px: 3,
py: 2,
color: 'white',
bg: 'primary',
border: 0,
borderRadius: 4
} })); });
var Link = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "a",
variant: "styles.a"
}, props, {
__themeKey: "links"
}));
});
var Link = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "a", variant: "styles.a" }, props, { __themeKey: "links" })); });
var Text = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "default"
}, props, {
__themeKey: "text"
}));
});
var Text = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "default" }, props, { __themeKey: "text" })); });
var Heading = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "h2",
variant: "heading"
}, props, {
__themeKey: "text",
__css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
}
}));
});
var Heading = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "h2", variant: "heading" }, props, { __themeKey: "text", __css: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading'
} })); });
var Image = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "img"
}, props, {
__themeKey: "images",
__css: _extends({
maxWidth: '100%',
height: 'auto'
}, props.__css)
}));
});
var Image = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "img" }, props, { __themeKey: "images", __css: Object.assign({}, {maxWidth: '100%',
height: 'auto'},
props.__css) })); });
var Card = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "cards"
}));
});
var Card = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "cards" })); });
var Label = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "label",
variant: "label"
}, props, {
__themeKey: "forms",
__css: {
width: '100%',
display: 'flex'
}
}));
});
var Label = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "label", variant: "label" }, props, { __themeKey: "forms", __css: {
width: '100%',
display: 'flex'
} })); });
var Input = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
variant: "input"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Input = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", variant: "input" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var SVG = (function (_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var SVG = (function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
var rest = objectWithoutProperties$1( ref, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size + '',
height: size + '',
viewBox: "0 0 24 24",
fill: "currentcolor"
}, props));
return React.createElement( Box, Object.assign({}, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size + '', height: size + '', viewBox: "0 0 24 24", fill: "currentcolor" }, props));
});
var getProps = function getProps(test) {
return function (props) {
var next = {};
var getProps = function (test) { return function (props) {
var next = {};
for (var key in props) {
if (test(key || '')) next[key] = props[key];
}
for (var key in props) {
if (test(key || '')) { next[key] = props[key]; }
}
return next;
};
};
return next;
}; };
var MRE = /^m[trblxy]?$/;
var getMargin = getProps(function (k) {
return MRE.test(k);
});
var omitMargin = getProps(function (k) {
return !MRE.test(k);
});
var getMargin = getProps(function (k) { return MRE.test(k); });
var omitMargin = getProps(function (k) { return !MRE.test(k); });
var DownArrow = function DownArrow(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M7 10l5 5 5-5z"
}));
};
var DownArrow = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M7 10l5 5 5-5z" })
); };
var Select = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({}, getMargin(props), {
sx: {
display: 'flex'
}
}), /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "select",
variant: "select"
}, omitMargin(props), {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
})), /*#__PURE__*/React.createElement(DownArrow, {
sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
}
}));
});
var Select = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, getMargin(props), { sx: {
display: 'flex'
} }),
React.createElement( Box, Object.assign({}, { ref: ref, as: "select", variant: "select" }, omitMargin(props), { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })),
React.createElement( DownArrow, { sx: {
ml: -28,
alignSelf: 'center',
pointerEvents: 'none'
} })
); });
var Textarea = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "textarea",
variant: "textarea"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
}
}));
});
var Textarea = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "textarea", variant: "textarea" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
p: 2,
appearance: 'none',
fontSize: 'inherit',
lineHeight: 'inherit',
border: '1px solid',
borderRadius: 4,
color: 'inherit',
bg: 'transparent'
} })); });
var RadioChecked = function RadioChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var RadioUnchecked = function RadioUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
}));
};
var RadioChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function RadioIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var RadioUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
); };
var RadioIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( RadioChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( RadioUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Radio = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Radio = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'radio';
var rest = objectWithoutProperties$2( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "radio"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "radio" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: RadioIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: RadioIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
// todo: system props??
mr: 2,
borderRadius: 9999,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
bg: 'highlight'
}
}
}));
} })
);
});
var CheckboxChecked = function CheckboxChecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}));
};
function objectWithoutProperties$3 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var CheckboxUnchecked = function CheckboxUnchecked(props) {
return /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}));
};
var CheckboxChecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
); };
var CheckboxIcon = function CheckboxIcon(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, {
__css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
var CheckboxUnchecked = function (props) { return React.createElement( SVG, props,
React.createElement( 'path', { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
); };
var CheckboxIcon = function (props) { return React.createElement( React.Fragment, null,
React.createElement( CheckboxChecked, Object.assign({}, props, { __css: {
display: 'none',
'input:checked ~ &': {
display: 'block'
}
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, {
__css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
} })),
React.createElement( CheckboxUnchecked, Object.assign({}, props, { __css: {
display: 'block',
'input:checked ~ &': {
display: 'none'
}
})));
};
} }))
); };
var Checkbox = React.forwardRef(function (_ref, ref) {
var className = _ref.className,
sx = _ref.sx,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]);
var Checkbox = React.forwardRef(function (ref$1, ref) {
var className = ref$1.className;
var sx = ref$1.sx;
var variant = ref$1.variant; if ( variant === void 0 ) variant = 'checkbox';
var rest = objectWithoutProperties$3( ref$1, ["className", "sx", "variant"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "checkbox"
}, props, {
sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
return React.createElement( Box, null,
React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "checkbox" }, props, { sx: {
position: 'absolute',
opacity: 0,
zIndex: -1,
width: 1,
height: 1,
overflow: 'hidden'
} })),
React.createElement( Box, { as: CheckboxIcon, 'aria-hidden': "true", __themeKey: "forms", variant: variant, className: className, sx: sx, __css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
})), /*#__PURE__*/React.createElement(Box, {
as: CheckboxIcon,
"aria-hidden": "true",
__themeKey: "forms",
variant: variant,
className: className,
sx: sx,
__css: {
mr: 2,
borderRadius: 4,
color: 'gray',
'input:checked ~ &': {
color: 'primary'
},
'input:focus ~ &': {
color: 'primary',
bg: 'highlight'
}
}
}));
} })
);
});

@@ -475,91 +294,68 @@

};
var Slider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "input",
type: "range",
variant: "slider"
}, props, {
__themeKey: "forms",
__css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
}
}));
});
var Slider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "input", type: "range", variant: "slider" }, props, { __themeKey: "forms", __css: {
display: 'block',
width: '100%',
height: 4,
my: 2,
cursor: 'pointer',
appearance: 'none',
borderRadius: 9999,
color: 'inherit',
bg: 'gray',
':focus': {
outline: 'none',
color: 'primary'
},
'&::-webkit-slider-thumb': thumb,
'&::-moz-range-thumb': thumb,
'&::-ms-thumb': thumb
} })); });
var Field = React.forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
Control = _ref$as === void 0 ? Input : _ref$as,
label = _ref.label,
name = _ref.name,
props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "name"]);
function objectWithoutProperties$4 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Field = React.forwardRef(function (ref$1, ref) {
var Control = ref$1.as; if ( Control === void 0 ) Control = Input;
var label = ref$1.label;
var name = ref$1.name;
var rest = objectWithoutProperties$4( ref$1, ["as", "label", "name"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, {
htmlFor: name
}, label), /*#__PURE__*/React.createElement(Control, _extends({
ref: ref,
id: name,
name: name
}, omitMargin(props))));
return React.createElement( Box, getMargin(props),
React.createElement( Label, { htmlFor: name }, label),
React.createElement( Control, Object.assign({}, { ref: ref, id: name, name: name }, omitMargin(props)))
);
});
var Progress = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "progress",
variant: "styles.progress"
}, props, {
__css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
}
}));
});
var Progress = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "progress", variant: "styles.progress" }, props, { __css: {
display: 'block',
width: '100%',
height: '4px',
margin: 0,
padding: 0,
overflow: 'hidden',
appearance: 'none',
color: 'primary',
bg: 'gray',
borderRadius: 9999,
border: 'none',
'&::-webkit-progress-bar': {
bg: 'transparent'
},
'&::-webkit-progress-value': {
bg: 'currentcolor'
},
'&::-moz-progress-bar': {
bg: 'currentcolor'
}
} })); });
var Donut = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 128 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
_ref$value = _ref.value,
value = _ref$value === void 0 ? 0 : _ref$value,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 1 : _ref$max,
title = _ref.title,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "value", "min", "max", "title"]);
function objectWithoutProperties$5 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Donut = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 128;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 2;
var value = ref$1.value; if ( value === void 0 ) value = 0;
var min = ref$1.min; if ( min === void 0 ) min = 0;
var max = ref$1.max; if ( max === void 0 ) max = 1;
var title = ref$1.title;
var rest = objectWithoutProperties$5( ref$1, ["size", "strokeWidth", "value", "min", "max", "title"] );
var props = rest;

@@ -569,34 +365,12 @@ var r = 16 - strokeWidth;

var offset = C - (value - min) / (max - min) * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img",
"aria-valuenow": value,
"aria-valuemin": min,
"aria-valuemax": max
}, props, {
__css: {
color: 'primary'
}
}), title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
transform: "rotate(-90 16 16)"
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img", 'aria-valuenow': value, 'aria-valuemin': min, 'aria-valuemax': max }, props, { __css: {
color: 'primary'
} }),
title && React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, transform: "rotate(-90 16 16)" })
);
});
function objectWithoutProperties$6 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var spin = core.keyframes({

@@ -610,12 +384,9 @@ from: {

});
var Spinner = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
_ref$strokeWidth = _ref.strokeWidth,
strokeWidth = _ref$strokeWidth === void 0 ? 4 : _ref$strokeWidth,
_ref$title = _ref.title,
title = _ref$title === void 0 ? 'Loading...' : _ref$title,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 500 : _ref$duration,
props = _objectWithoutPropertiesLoose(_ref, ["size", "strokeWidth", "max", "title", "duration"]);
var Spinner = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var strokeWidth = ref$1.strokeWidth; if ( strokeWidth === void 0 ) strokeWidth = 4;
var title = ref$1.title; if ( title === void 0 ) title = 'Loading...';
var duration = ref$1.duration; if ( duration === void 0 ) duration = 500;
var rest = objectWithoutProperties$6( ref$1, ["size", "strokeWidth", "max", "title", "duration"] );
var props = rest;

@@ -625,30 +396,9 @@ var r = 16 - strokeWidth;

var offset = C - 1 / 4 * C;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "svg",
viewBox: "0 0 32 32",
width: size,
height: size,
strokeWidth: strokeWidth,
fill: "none",
stroke: "currentcolor",
role: "img"
}, props, {
__css: {
color: 'primary',
overflow: 'visible'
}
}), /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
cx: 16,
cy: 16,
r: r,
opacity: 1 / 8
}), /*#__PURE__*/React.createElement(Box, {
as: "circle",
cx: 16,
cy: 16,
r: r,
strokeDasharray: C,
strokeDashoffset: offset,
__css: {
return React.createElement( Box, Object.assign({}, { ref: ref, as: "svg", viewBox: "0 0 32 32", width: size, height: size, strokeWidth: strokeWidth, fill: "none", stroke: "currentcolor", role: "img" }, props, { __css: {
color: 'primary',
overflow: 'visible'
} }),
React.createElement( 'title', null, title ),
React.createElement( 'circle', { cx: 16, cy: 16, r: r, opacity: 1 / 8 }),
React.createElement( Box, { as: "circle", cx: 16, cy: 16, r: r, strokeDasharray: C, strokeDashoffset: offset, __css: {
transformOrigin: '50% 50%',

@@ -659,329 +409,227 @@ animationName: spin.toString(),

animationIterationCount: 'infinite'
}
}));
} })
);
});
var Avatar = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 48 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$7 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Avatar = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 48;
var rest = objectWithoutProperties$7( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Image, _extends({
ref: ref,
width: size,
height: size,
variant: "avatar"
}, props, {
__css: {
borderRadius: 9999
}
}));
return React.createElement( Image, Object.assign({}, { ref: ref, width: size, height: size, variant: "avatar" }, props, { __css: {
borderRadius: 9999
} }));
});
var Badge = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "badges",
__css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
}
}));
});
var Badge = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "badges", __css: {
display: 'inline-block',
verticalAlign: 'baseline',
fontSize: 0,
fontWeight: 'bold',
whiteSpace: 'nowrap',
px: 1,
borderRadius: 2,
color: 'white',
bg: 'primary'
} })); });
var IconButton = React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 32 : _ref$size,
props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$8 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var IconButton = React.forwardRef(function (ref$1, ref) {
var size = ref$1.size; if ( size === void 0 ) size = 32;
var rest = objectWithoutProperties$8( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "button",
variant: "icon"
}, props, {
__themeKey: "buttons",
__css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
}
}));
return React.createElement( Box, Object.assign({}, { ref: ref, as: "button", variant: "icon" }, props, { __themeKey: "buttons", __css: {
appearance: 'none',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
width: size,
height: size,
color: 'inherit',
bg: 'transparent',
border: 'none',
borderRadius: 4
} }));
});
var x = /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
fill: "currentcolor",
viewBox: "0 0 24 24"
}, /*#__PURE__*/React.createElement("path", {
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
}));
var Close = React.forwardRef(function (_ref, ref) {
var props = _objectWithoutPropertiesLoose(_ref, ["size"]);
function objectWithoutProperties$9 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var x = React.createElement( 'svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentcolor", viewBox: "0 0 24 24" },
React.createElement( 'path', { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
);
var Close = React.forwardRef(function (ref$1, ref) {
var rest = objectWithoutProperties$9( ref$1, ["size"] );
var props = rest;
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Close",
"aria-label": "Close",
variant: "close"
}, props, {
children: x
}));
return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Close", 'aria-label': "Close", variant: "close" }, props, { children: x }));
});
var Alert = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "primary"
}, props, {
__themeKey: "alerts",
__css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
}
}));
});
var Alert = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "primary" }, props, { __themeKey: "alerts", __css: {
display: 'flex',
alignItems: 'center',
px: 3,
py: 2,
fontWeight: 'bold',
color: 'white',
bg: 'primary',
borderRadius: 4
} })); });
var Divider = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
as: "hr",
variant: "styles.hr"
}, props, {
__css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
}
}));
});
var Divider = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, as: "hr", variant: "styles.hr" }, props, { __css: {
color: 'gray',
m: 0,
my: 2,
border: 0,
borderBottom: '1px solid'
} })); });
var Embed = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
src = _ref.src,
_ref$frameBorder = _ref.frameBorder,
frameBorder = _ref$frameBorder === void 0 ? 0 : _ref$frameBorder,
_ref$allowFullScreen = _ref.allowFullScreen,
allowFullScreen = _ref$allowFullScreen === void 0 ? true : _ref$allowFullScreen,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 560 : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 315 : _ref$height,
allow = _ref.allow,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"]);
function objectWithoutProperties$a (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var Embed = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 16 / 9;
var src = ref$1.src;
var frameBorder = ref$1.frameBorder; if ( frameBorder === void 0 ) frameBorder = 0;
var allowFullScreen = ref$1.allowFullScreen; if ( allowFullScreen === void 0 ) allowFullScreen = true;
var width = ref$1.width; if ( width === void 0 ) width = 560;
var height = ref$1.height; if ( height === void 0 ) height = 315;
var allow = ref$1.allow;
var rest = objectWithoutProperties$a( ref$1, ["ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
}
}), /*#__PURE__*/React.createElement(Box, {
ref: ref,
as: "iframe",
src: src,
width: width,
height: height,
frameBorder: frameBorder,
allowFullScreen: allowFullScreen,
allow: allow,
__css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
}
}));
return React.createElement( Box, Object.assign({}, props, { __css: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%',
position: 'relative',
overflow: 'hidden'
} }),
React.createElement( Box, { ref: ref, as: "iframe", src: src, width: width, height: height, frameBorder: frameBorder, allowFullScreen: allowFullScreen, allow: allow, __css: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
border: 0
} })
);
});
var AspectRatio = React.forwardRef(function (_ref, ref) {
var _ref$ratio = _ref.ratio,
ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]);
function objectWithoutProperties$b (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectRatio = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio; if ( ratio === void 0 ) ratio = 4 / 3;
var children = ref$1.children;
var rest = objectWithoutProperties$b( ref$1, ["ratio", "children"] );
var props = rest;
return /*#__PURE__*/React.createElement(Box, {
ref: ref,
sx: {
position: 'relative',
overflow: 'hidden'
}
}, /*#__PURE__*/React.createElement(Box, {
sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
}
}), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
__css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), children));
return React.createElement( Box, { ref: ref, sx: {
position: 'relative',
overflow: 'hidden'
} },
React.createElement( Box, { sx: {
width: '100%',
height: 0,
paddingBottom: 100 / ratio + '%'
} }),
React.createElement( Box, Object.assign({}, props, { __css: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
} }),
children
)
);
});
var AspectImage = React.forwardRef(function (_ref, ref) {
var ratio = _ref.ratio,
props = _objectWithoutPropertiesLoose(_ref, ["ratio"]);
function objectWithoutProperties$c (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var AspectImage = React.forwardRef(function (ref$1, ref) {
var ratio = ref$1.ratio;
var rest = objectWithoutProperties$c( ref$1, ["ratio"] );
var props = rest;
return /*#__PURE__*/React.createElement(AspectRatio, {
ratio: ratio
}, /*#__PURE__*/React.createElement(Image, _extends({
ref: ref
}, props, {
__css: {
objectFit: 'cover'
}
})));
return React.createElement( AspectRatio, { ratio: ratio },
React.createElement( Image, Object.assign({}, { ref: ref }, props, { __css: {
objectFit: 'cover'
} }))
);
});
var Container = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref,
variant: "container"
}, props, {
__themeKey: "layout",
__css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
}
}));
});
var Container = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref, variant: "container" }, props, { __themeKey: "layout", __css: {
width: '100%',
maxWidth: 'container',
mx: 'auto'
} })); });
var NavLink = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Link, _extends({
ref: ref,
variant: "nav"
}, props, {
__css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
}
}));
});
var NavLink = React.forwardRef(function (props, ref) { return React.createElement( Link, Object.assign({}, { ref: ref, variant: "nav" }, props, { __css: {
color: 'inherit',
textDecoration: 'none',
fontWeight: 'bold',
display: 'inline-block',
'&:hover, &:focus, &.active': {
color: 'primary'
}
} })); });
var Message = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Box, _extends({
ref: ref
}, props, {
__themeKey: "messages",
__css: {
padding: 3,
paddingLeft: function paddingLeft(t) {
return t.space[3] - t.space[1];
},
borderLeftWidth: function borderLeftWidth(t) {
return t.space[1];
},
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
}
}));
});
var Message = React.forwardRef(function (props, ref) { return React.createElement( Box, Object.assign({}, { ref: ref }, props, { __themeKey: "messages", __css: {
padding: 3,
paddingLeft: function (t) { return t.space[3] - t.space[1]; },
borderLeftWidth: function (t) { return t.space[1]; },
borderLeftStyle: 'solid',
borderLeftColor: 'primary',
borderRadius: 4,
bg: 'highlight'
} })); });
var MenuIcon = function MenuIcon(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size;
return /*#__PURE__*/React.createElement(Box, {
as: "svg",
xmlns: "http://www.w3.org/2000/svg",
width: size,
height: size,
fill: "currentcolor",
viewBox: "0 0 24 24",
sx: {
display: 'block',
margin: 0
}
}, /*#__PURE__*/React.createElement("path", {
d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
}));
var MenuIcon = function (ref) {
var size = ref.size; if ( size === void 0 ) size = 24;
return React.createElement( Box, { as: "svg", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentcolor", viewBox: "0 0 24 24", sx: {
display: 'block',
margin: 0
} },
React.createElement( 'path', { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })
);
};
var MenuButton = React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
title: "Menu",
"aria-label": "Toggle Menu",
variant: "menu"
}, props), /*#__PURE__*/React.createElement(MenuIcon, null));
});
var MenuButton = React.forwardRef(function (props, ref) { return React.createElement( IconButton, Object.assign({}, { ref: ref, title: "Menu", 'aria-label': "Toggle Menu", variant: "menu" }, props),
React.createElement( MenuIcon, null )
); });
exports.Alert = Alert;
exports.AspectImage = AspectImage;
exports.AspectRatio = AspectRatio;
exports.Avatar = Avatar;
exports.Badge = Badge;
exports.Box = Box;
exports.Flex = Flex;
exports.Grid = Grid;
exports.Button = Button;
exports.Link = Link;
exports.Text = Text;
exports.Heading = Heading;
exports.Image = Image;
exports.Card = Card;
exports.Label = Label;
exports.Input = Input;
exports.Select = Select;
exports.Textarea = Textarea;
exports.Radio = Radio;
exports.Checkbox = Checkbox;
exports.Slider = Slider;
exports.Field = Field;
exports.Progress = Progress;
exports.Donut = Donut;
exports.Spinner = Spinner;
exports.Avatar = Avatar;
exports.Badge = Badge;
exports.Close = Close;
exports.Container = Container;
exports.Alert = Alert;
exports.Divider = Divider;
exports.Donut = Donut;
exports.Embed = Embed;
exports.Field = Field;
exports.Flex = Flex;
exports.Grid = Grid;
exports.Heading = Heading;
exports.AspectRatio = AspectRatio;
exports.AspectImage = AspectImage;
exports.Container = Container;
exports.NavLink = NavLink;
exports.Message = Message;
exports.IconButton = IconButton;
exports.Image = Image;
exports.Input = Input;
exports.Label = Label;
exports.Link = Link;
exports.MenuButton = MenuButton;
exports.Message = Message;
exports.NavLink = NavLink;
exports.Progress = Progress;
exports.Radio = Radio;
exports.Select = Select;
exports.Slider = Slider;
exports.Spinner = Spinner;
exports.Text = Text;
exports.Textarea = Textarea;
})));
//# sourceMappingURL=index.umd.js.map

6

package.json
{
"name": "@theme-ui/components",
"version": "0.3.2-alpha.10+80ad9af6",
"version": "0.3.2",
"main": "dist/index.js",

@@ -17,3 +17,3 @@ "module": "dist/index.esm.js",

"@styled-system/space": "^5.1.2",
"@theme-ui/css": "^0.3.2-alpha.10+80ad9af6"
"@theme-ui/css": "^0.3.2"
},

@@ -28,3 +28,3 @@ "peerDependencies": {

"license": "MIT",
"gitHead": "80ad9af6483a680fb703d5ebd7b8564d06e7d6c7"
"gitHead": "3f78f13ae0c62105fb81bdb7792c6e28cf3521b5"
}
dist/index.esm.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.modern.js.map

Sorry, the diff of this file is not supported yet

dist/index.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc