@theme-ui/components
Advanced tools
Comparing version 0.3.3 to 0.3.4
@@ -7,3 +7,3 @@ import styled from '@emotion/styled'; | ||
import React from 'react'; | ||
import { keyframes } from '@emotion/core'; | ||
import { keyframes } from '@emotion/react'; | ||
@@ -34,2 +34,35 @@ const shouldForwardProp = createShouldForwardProp([...space.propNames, ...color.propNames]); | ||
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; | ||
@@ -41,11 +74,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 | ||
@@ -56,3 +91,3 @@ }, props, { | ||
display: 'grid', | ||
gridGap: _gap, | ||
gridGap: gap, | ||
gridTemplateColumns | ||
@@ -63,3 +98,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, | ||
@@ -72,3 +107,3 @@ as: "button", | ||
appearance: 'none', | ||
display: 'inline-block', | ||
display: props.hidden ? undefined : 'inline-block', | ||
textAlign: 'center', | ||
@@ -87,3 +122,3 @@ lineHeight: 'inherit', | ||
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, | ||
@@ -96,3 +131,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, | ||
@@ -104,3 +139,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, | ||
@@ -118,3 +153,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, | ||
@@ -124,10 +159,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, | ||
@@ -139,3 +173,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, | ||
@@ -152,3 +186,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, | ||
@@ -173,14 +207,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 => { | ||
@@ -203,33 +241,40 @@ const next = {}; | ||
const Select = React.forwardRef((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' | ||
} | ||
})), /*#__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, | ||
@@ -262,3 +307,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: { | ||
@@ -270,3 +315,3 @@ display: 'none', | ||
} | ||
})), /*#__PURE__*/React.createElement(RadioUnchecked, Object.assign({}, props, { | ||
})), /*#__PURE__*/React.createElement(RadioUnchecked, _extends({}, props, { | ||
__css: { | ||
@@ -280,41 +325,49 @@ display: 'block', | ||
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' | ||
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' | ||
} | ||
} | ||
})); | ||
}); | ||
@@ -329,3 +382,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: { | ||
@@ -337,3 +390,3 @@ display: 'none', | ||
} | ||
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, Object.assign({}, props, { | ||
})), /*#__PURE__*/React.createElement(CheckboxUnchecked, _extends({}, props, { | ||
__css: { | ||
@@ -347,42 +400,121 @@ display: 'block', | ||
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' | ||
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' | ||
} | ||
}, /*#__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((_ref, ref) => { | ||
let { | ||
className, | ||
label, | ||
sx, | ||
variant = 'switch' | ||
} = _ref, | ||
props = _objectWithoutPropertiesLoose(_ref, ["className", "label", "sx", "variant"]); | ||
return /*#__PURE__*/React.createElement(Label, { | ||
sx: { | ||
cursor: 'pointer' | ||
} | ||
}, /*#__PURE__*/React.createElement(Box, _extends({ | ||
ref: ref, | ||
as: "input", | ||
type: "checkbox", | ||
__themeKey: "forms", | ||
"aria-label": label | ||
}, props, { | ||
sx: { | ||
position: 'absolute', | ||
opacity: 0, | ||
zIndex: -1, | ||
width: 1, | ||
height: 1, | ||
overflow: 'hidden' | ||
} | ||
})), /*#__PURE__*/React.createElement(Box, { | ||
css: { | ||
padding: GUTTER | ||
}, | ||
'input:focus ~ &': { | ||
color: 'primary', | ||
bg: 'highlight' | ||
__themeKey: "forms", | ||
variant: variant, | ||
className: className, | ||
sx: sx, | ||
__css: { | ||
position: 'relative', | ||
bg: 'gray', | ||
borderRadius: SIZE, | ||
height: SIZE + GUTTER * 2, | ||
width: SIZE * 2 + GUTTER * 2, | ||
mr: 2, | ||
'input:disabled ~ &': { | ||
opacity: 0.5, | ||
cursor: 'not-allowed' | ||
}, | ||
'& > div': { | ||
display: 'flex', | ||
alignItems: 'center', | ||
borderRadius: '50%', | ||
height: SIZE, | ||
width: SIZE, | ||
bg: 'white', | ||
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', | ||
position: 'relative', | ||
transform: 'translateX(0%)', | ||
transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)` | ||
}, | ||
'input:checked ~ &': { | ||
bg: 'primary', | ||
'> div': { | ||
transform: 'translateX(100%)' | ||
} | ||
} | ||
} | ||
} | ||
}), children)); | ||
}, /*#__PURE__*/React.createElement(Box, null)), /*#__PURE__*/React.createElement("span", null, label)); | ||
}); | ||
@@ -398,3 +530,3 @@ const thumb = { | ||
}; | ||
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, | ||
@@ -426,13 +558,17 @@ as: "input", | ||
const Field = React.forwardRef(({ | ||
as: Control = Input, | ||
label, | ||
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: name | ||
}, label), /*#__PURE__*/React.createElement(Control, Object.assign({ | ||
htmlFor: fieldIdentifier | ||
}, label), /*#__PURE__*/React.createElement(Control, _extends({ | ||
ref: ref, | ||
id: name, | ||
id: fieldIdentifier, | ||
name: name | ||
@@ -442,3 +578,3 @@ }, omitMargin(props)))); | ||
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, | ||
@@ -472,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, { | ||
@@ -525,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", | ||
@@ -552,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, | ||
@@ -569,3 +709,3 @@ cy: 16, | ||
animationTimingFunction: 'linear', | ||
animationDuration: _duration + 'ms', | ||
animationDuration: duration + 'ms', | ||
animationIterationCount: 'infinite' | ||
@@ -576,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, | ||
@@ -609,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", { | ||
@@ -643,15 +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, | ||
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, | ||
@@ -673,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, | ||
@@ -688,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, | ||
@@ -777,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, | ||
@@ -793,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 | ||
@@ -825,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, | ||
@@ -833,3 +998,3 @@ title: "Menu", | ||
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 { 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, Switch, Text, Textarea }; | ||
//# sourceMappingURL=index.modern.js.map |
{ | ||
"name": "@theme-ui/components", | ||
"version": "0.3.3", | ||
"version": "0.3.4", | ||
"main": "dist/index.js", | ||
@@ -17,3 +17,3 @@ "module": "dist/index.esm.js", | ||
"@styled-system/space": "^5.1.2", | ||
"@theme-ui/css": "^0.3.3" | ||
"@theme-ui/css": "^0.3.4" | ||
}, | ||
@@ -28,3 +28,3 @@ "peerDependencies": { | ||
"license": "MIT", | ||
"gitHead": "bfba2df8fdd01119c3af6a233355db1955c54ba0" | ||
"gitHead": "7840f829dea27b554c5cd1cb00470770fceca2eb" | ||
} |
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
316626
3960
Updated@theme-ui/css@^0.3.4