@theme-ui/components
Advanced tools
Comparing version 0.4.0-rc.11 to 0.4.0-rc.12
@@ -33,2 +33,35 @@ 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; | ||
@@ -40,11 +73,13 @@ | ||
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({ | ||
const Grid = React.forwardRef((_ref, ref) => { | ||
let { | ||
width, | ||
columns, | ||
gap = 3, | ||
repeat = 'fit' | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["width", "columns", "gap", "repeat"]); | ||
const gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns); | ||
return /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref | ||
@@ -55,3 +90,3 @@ }, props, { | ||
display: 'grid', | ||
gridGap: _gap, | ||
gridGap: gap, | ||
gridTemplateColumns | ||
@@ -62,3 +97,3 @@ } | ||
const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Button = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -85,3 +120,3 @@ as: "button", | ||
const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Link = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -94,3 +129,3 @@ as: "a", | ||
const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Text = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -102,3 +137,3 @@ variant: "default" | ||
const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Heading = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -116,3 +151,3 @@ as: "h2", | ||
const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Image = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -122,10 +157,9 @@ as: "img" | ||
__themeKey: "images", | ||
__css: { | ||
__css: _extends({ | ||
maxWidth: '100%', | ||
height: 'auto', | ||
...props.__css | ||
} | ||
height: 'auto' | ||
}, props.__css) | ||
}))); | ||
const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Card = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -137,3 +171,3 @@ variant: "primary" | ||
const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Label = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -150,3 +184,3 @@ as: "label", | ||
const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Input = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -171,14 +205,18 @@ as: "input", | ||
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))); | ||
var SVG = ((_ref) => { | ||
let { | ||
size = 24 | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["size"]); | ||
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 => { | ||
@@ -201,36 +239,40 @@ const next = {}; | ||
const Select = React.forwardRef(({ | ||
arrow, | ||
...props | ||
}, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({}, getMargin(props), { | ||
sx: { | ||
display: 'flex' | ||
} | ||
}), /*#__PURE__*/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' | ||
} | ||
})), arrow || /*#__PURE__*/React.createElement(DownArrow, { | ||
sx: { | ||
ml: -28, | ||
alignSelf: 'center', | ||
pointerEvents: 'none' | ||
} | ||
}))); | ||
const Select = React.forwardRef((_ref, ref) => { | ||
let { | ||
arrow | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["arrow"]); | ||
const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
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' | ||
} | ||
})), arrow || /*#__PURE__*/React.createElement(DownArrow, { | ||
sx: { | ||
ml: -28, | ||
alignSelf: 'center', | ||
pointerEvents: 'none' | ||
} | ||
})); | ||
}); | ||
const Textarea = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -263,3 +305,3 @@ as: "textarea", | ||
const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, Object.assign({}, props, { | ||
const RadioIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioChecked, _extends({}, props, { | ||
__css: { | ||
@@ -271,3 +313,3 @@ display: 'none', | ||
} | ||
})), /*#__PURE__*/React.createElement(RadioUnchecked, Object.assign({}, props, { | ||
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, { | ||
__css: { | ||
@@ -281,45 +323,49 @@ display: 'block', | ||
const Radio = React.forwardRef(({ | ||
className, | ||
sx, | ||
variant: _variant = 'radio', | ||
...props | ||
}, ref) => /*#__PURE__*/React.createElement(Box, { | ||
sx: { | ||
minWidth: 'min-content' | ||
} | ||
}, /*#__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' | ||
const Radio = React.forwardRef((_ref, ref) => { | ||
let { | ||
className, | ||
sx, | ||
variant = 'radio' | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant"]); | ||
return /*#__PURE__*/React.createElement(Box, { | ||
sx: { | ||
minWidth: 'min-content' | ||
} | ||
} | ||
}))); | ||
}, /*#__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' | ||
} | ||
})), /*#__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' | ||
} | ||
} | ||
})); | ||
}); | ||
@@ -334,3 +380,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, Object.assign({}, props, { | ||
const CheckboxIcon = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxChecked, _extends({}, props, { | ||
__css: { | ||
@@ -342,3 +388,3 @@ display: 'none', | ||
} | ||
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, Object.assign({}, props, { | ||
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, { | ||
__css: { | ||
@@ -352,56 +398,62 @@ display: 'block', | ||
const Checkbox = React.forwardRef(({ | ||
className, | ||
sx, | ||
variant: _variant = 'checkbox', | ||
children, | ||
...props | ||
}, ref) => /*#__PURE__*/React.createElement(Box, { | ||
sx: { | ||
minWidth: 'min-content' | ||
} | ||
}, /*#__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' | ||
const Checkbox = React.forwardRef((_ref, ref) => { | ||
let { | ||
className, | ||
sx, | ||
variant = 'checkbox', | ||
children | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["className", "sx", "variant", "children"]); | ||
return /*#__PURE__*/React.createElement(Box, { | ||
sx: { | ||
minWidth: 'min-content' | ||
} | ||
} | ||
}), children)); | ||
}, /*#__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' | ||
} | ||
})), /*#__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' | ||
} | ||
} | ||
}), children); | ||
}); | ||
const GUTTER = 2; | ||
const SIZE = 18; | ||
const Switch = React.forwardRef(({ | ||
className, | ||
label, | ||
sx, | ||
variant: _variant = 'switch', | ||
...props | ||
}, ref) => { | ||
const Switch = React.forwardRef((_ref, ref) => { | ||
let { | ||
className, | ||
label, | ||
sx, | ||
variant = 'switch' | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["className", "label", "sx", "variant"]); | ||
return /*#__PURE__*/React.createElement(Label, { | ||
@@ -411,3 +463,3 @@ sx: { | ||
} | ||
}, /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
}, /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -432,3 +484,3 @@ as: "input", | ||
__themeKey: "forms", | ||
variant: _variant, | ||
variant: variant, | ||
className: className, | ||
@@ -478,3 +530,3 @@ sx: sx, | ||
}; | ||
const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Slider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -506,13 +558,15 @@ as: "input", | ||
const Field = React.forwardRef(({ | ||
as: Control = Input, | ||
label, | ||
id, | ||
name, | ||
...props | ||
}, ref) => { | ||
const Field = React.forwardRef((_ref, ref) => { | ||
let { | ||
as: Control = Input, | ||
label, | ||
id, | ||
name | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["as", "label", "id", "name"]); | ||
const fieldIdentifier = id || name; | ||
return /*#__PURE__*/React.createElement(Box, getMargin(props), /*#__PURE__*/React.createElement(Label, { | ||
htmlFor: fieldIdentifier | ||
}, label), /*#__PURE__*/React.createElement(Control, Object.assign({ | ||
}, label), /*#__PURE__*/React.createElement(Control, _extends({ | ||
ref: ref, | ||
@@ -524,3 +578,3 @@ id: fieldIdentifier, | ||
const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Progress = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -554,27 +608,29 @@ as: "progress", | ||
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 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 C = 2 * r * Math.PI; | ||
const offset = C - (_value - _min) / (_max - _min) * C; | ||
return /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const 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, | ||
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, { | ||
@@ -607,20 +663,22 @@ __css: { | ||
}); | ||
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 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 C = 2 * r * Math.PI; | ||
const offset = C - 1 / 4 * C; | ||
return /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
return /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
as: "svg", | ||
viewBox: "0 0 32 32", | ||
width: _size, | ||
height: _size, | ||
strokeWidth: _strokeWidth, | ||
width: size, | ||
height: size, | ||
strokeWidth: strokeWidth, | ||
fill: "none", | ||
@@ -634,3 +692,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, | ||
@@ -651,3 +709,3 @@ cy: 16, | ||
animationTimingFunction: 'linear', | ||
animationDuration: _duration + 'ms', | ||
animationDuration: duration + 'ms', | ||
animationIterationCount: 'infinite' | ||
@@ -658,17 +716,21 @@ } | ||
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 | ||
} | ||
}))); | ||
const Avatar = React.forwardRef((_ref, ref) => { | ||
let { | ||
size = 48 | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["size"]); | ||
const Badge = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
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({ | ||
ref: ref, | ||
@@ -691,26 +753,30 @@ variant: "primary" | ||
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 | ||
} | ||
}))); | ||
const IconButton = React.forwardRef((_ref, ref) => { | ||
let { | ||
size = 32 | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["size"]); | ||
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", { | ||
@@ -725,16 +791,20 @@ xmlns: "http://www.w3.org/2000/svg", | ||
})); | ||
const Close = React.forwardRef(({ | ||
size: _size = 32, | ||
...props | ||
}, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({ | ||
ref: ref, | ||
size: _size, | ||
title: "Close", | ||
"aria-label": "Close", | ||
variant: "close" | ||
}, props, { | ||
children: x | ||
}))); | ||
const Close = React.forwardRef((_ref, ref) => { | ||
let { | ||
size = 32 | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["size"]); | ||
const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
return /*#__PURE__*/React.createElement(IconButton, _extends({ | ||
ref: ref, | ||
size: size, | ||
title: "Close", | ||
"aria-label": "Close", | ||
variant: "close" | ||
}, props, { | ||
children: x | ||
})); | ||
}); | ||
const Alert = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -756,3 +826,3 @@ variant: "primary" | ||
const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Divider = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
@@ -771,79 +841,91 @@ as: "hr", | ||
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 | ||
} | ||
}))); | ||
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 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))); | ||
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 AspectImage = React.forwardRef(({ | ||
ratio, | ||
...props | ||
}, ref) => /*#__PURE__*/React.createElement(AspectRatio, { | ||
ratio: ratio | ||
}, /*#__PURE__*/React.createElement(Image, Object.assign({ | ||
ref: ref | ||
}, props, { | ||
__css: { | ||
objectFit: 'cover' | ||
} | ||
})))); | ||
const AspectRatio = React.forwardRef((_ref, ref) => { | ||
let { | ||
ratio = 4 / 3, | ||
children | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["ratio", "children"]); | ||
const Container = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
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({ | ||
ref: ref, | ||
@@ -860,3 +942,3 @@ variant: "container" | ||
const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, Object.assign({ | ||
const NavLink = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Link, _extends({ | ||
ref: ref, | ||
@@ -876,3 +958,3 @@ variant: "nav" | ||
const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, Object.assign({ | ||
const Message = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref | ||
@@ -908,3 +990,3 @@ }, props, { | ||
})); | ||
const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, Object.assign({ | ||
const MenuButton = React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(IconButton, _extends({ | ||
ref: ref, | ||
@@ -911,0 +993,0 @@ title: "Menu", |
{ | ||
"name": "@theme-ui/components", | ||
"version": "0.4.0-rc.11", | ||
"version": "0.4.0-rc.12", | ||
"main": "dist/index.js", | ||
@@ -30,3 +30,3 @@ "module": "dist/index.esm.js", | ||
"license": "MIT", | ||
"gitHead": "7a97b423774254db514139cb557d8636d5231725" | ||
"gitHead": "3ed98e25cb915f0f6d55c64ac8c5026ef81e074f" | ||
} |
import React from 'react' | ||
import renderer from 'react-test-renderer' | ||
import { renderJSON } from '@theme-ui/test-utils' | ||
import { matchers } from 'jest-emotion' | ||
@@ -43,4 +43,2 @@ import { ThemeProvider } from 'theme-ui' | ||
const renderJSON = (el) => renderer.create(el).toJSON() | ||
const theme = { | ||
@@ -47,0 +45,0 @@ boxes: { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
390849
6106