@theme-ui/components

Package Overview

Dependencies

Maintainers

Versions

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@theme-ui/components - npm Package Compare versions

Comparing version 0.15.7 to 0.16.0-develop.4

dist/theme-ui-components.cjs.d.ts.map

dist/declarations/src/Alert.d.ts

		import { BoxProps } from './Box';
		import type { ForwardRef } from './types';
		export declare type AlertProps = BoxProps;
		export type AlertProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * Component for displaying messages, notifications, or other application state.

dist/declarations/src/Badge.d.ts

		import { BoxProps } from './Box';
		import type { ForwardRef } from './types';
		export declare type BadgeProps = BoxProps;
		export type BadgeProps = BoxProps;
		export declare const Badge: ForwardRef<HTMLDivElement, BadgeProps>;

dist/declarations/src/Box.d.ts

		@@ -1,9 +0,8 @@
		/** @jsx jsx */
		import { Interpolation } from '@emotion/react';
		import React from 'react';
		import { ThemeUICSSProperties, ThemeUIStyleObject } from '@theme-ui/css';
		import type { Assign } from './types';
		import type { Assign, ForwardRef } from './types';
		declare const boxSystemProps: readonly ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "m", "mt", "mr", "mb", "ml", "mx", "my", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "p", "pt", "pr", "pb", "pl", "px", "py", "color", "backgroundColor", "bg", "opacity"];
		declare type BoxSystemPropsKeys = typeof boxSystemProps[number];
		declare type BoxSystemProps = Pick<ThemeUICSSProperties, BoxSystemPropsKeys>;
		type BoxSystemPropsKeys = (typeof boxSystemProps)[number];
		type BoxSystemProps = Pick<ThemeUICSSProperties, BoxSystemPropsKeys>;
		export interface BoxOwnProps extends BoxSystemProps {
		@@ -25,3 +24,3 @@ as?: React.ElementType;
		*/
		export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<any>>;
		export declare const Box: ForwardRef<any, BoxProps>;
		export {};

dist/declarations/src/Card.d.ts

		import { BoxProps } from './Box';
		import type { ForwardRef } from './types';
		export declare type CardProps = BoxProps;
		export type CardProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * Card style variants can be defined in the `theme.cards` object.

dist/declarations/src/Close.d.ts

		@@ -0,4 +1,5 @@
		import React from 'react';
		import { IconButtonProps } from './IconButton';
		import type { ForwardRef } from './types';
		export declare const CloseIcon: JSX.Element;
		export declare const CloseIcon: React.JSX.Element;
		export interface CloseProps extends Omit<IconButtonProps, 'children'> {
		@@ -5,0 +6,0 @@ }

dist/declarations/src/Container.d.ts

		import { BoxProps } from './Box';
		import type { ForwardRef } from './types';
		export declare type ContainerProps = BoxProps;
		export type ContainerProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * Centered, max-width layout component

dist/declarations/src/Divider.d.ts

		import { BoxProps } from './Box';
		import type { ForwardRef } from './types';
		export declare type DividerProps = BoxProps;
		export type DividerProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * The Divider component reuses styles from `theme.styles.hr` as its default variant.

dist/declarations/src/Field.d.ts

		@@ -14,3 +14,3 @@ import React from 'react';
		}
		export declare type FieldProps<T extends React.ElementType> = FieldOwnProps & Omit<React.ComponentPropsWithRef<T>, 'as' \| keyof FieldOwnProps> & {
		export type FieldProps<T extends React.ElementType> = FieldOwnProps & Omit<React.ComponentPropsWithRef<T>, 'as' \| keyof FieldOwnProps> & {
		/**
		@@ -17,0 +17,0 @@ * form control to render, default Input

dist/declarations/src/Flex.d.ts

		import { BoxOwnProps, BoxProps } from './Box';
		import { ForwardRef } from './types';
		export declare type FlexOwnProps = BoxOwnProps;
		export declare type FlexProps = BoxProps;
		export type FlexOwnProps = BoxOwnProps;
		export type FlexProps = BoxProps;
		/**
		@@ -6,0 +6,0 @@ * Use the Flex component to create flexbox layouts.

dist/declarations/src/MenuButton.d.ts

		@@ -1,3 +0,2 @@
		/** @jsx jsx */
		import { jsx } from '@emotion/react';
		import React from 'react';
		import { IconButtonProps } from './IconButton';
		@@ -7,4 +6,4 @@ import type { ForwardRef } from './types';
		size?: number \| undefined;
		}) => jsx.JSX.Element;
		export declare type MenuButtonProps = IconButtonProps;
		}) => React.JSX.Element;
		export type MenuButtonProps = IconButtonProps;
		/**
		@@ -11,0 +10,0 @@ * MenuButton variants can be defined in the `theme.buttons` object.

dist/declarations/src/Message.d.ts

		import { BoxProps } from './Box';
		import { ForwardRef } from './types';
		export declare type MessageProps = BoxProps;
		export type MessageProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * Styled Box component for callouts and inline messages

dist/declarations/src/NavLink.d.ts

		import { LinkProps } from './Link';
		import type { ForwardRef } from './types';
		export declare type NavLinkProps = LinkProps;
		export type NavLinkProps = LinkProps;
		/**
		@@ -5,0 +5,0 @@ * Link component for use in navigation

dist/declarations/src/Text.d.ts

		import { BoxProps } from './Box';
		import { ForwardRef } from './types';
		export declare type TextProps = BoxProps;
		export type TextProps = BoxProps;
		/**
		@@ -5,0 +5,0 @@ * Primitive typographic component.

dist/declarations/src/types.d.ts

		@@ -1,5 +0,5 @@
		import * as React from 'react';
		export declare type Assign<T, U> = {
		export type Assign<T, U> = {
		[P in keyof (T & U)]: P extends keyof T ? T[P] : P extends keyof U ? U[P] : never;
		};
		export declare type ForwardRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
		export interface ForwardRef<T, P> extends React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> {
		}

dist/theme-ui-components.cjs.d.ts

		export * from "./declarations/src/index";
		//# sourceMappingURL=theme-ui-components.cjs.d.ts.map

1706

dist/theme-ui-components.cjs.dev.js

		@@ -8,2 +8,3 @@ 'use strict';
		var css = require('@theme-ui/css');
		var jsxRuntime = require('@theme-ui/core/jsx-runtime');

		@@ -14,94 +15,19 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

		function _extends() {
		_extends = Object.assign ? Object.assign.bind() : 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;
		}

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

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

		return arr2;
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _createForOfIteratorHelperLoose(o, allowArrayLike) {
		var it = typeof Symbol !== "undefined" && o[Symbol.iterator] \|\| o["@@iterator"];
		if (it) return (it = it.call(o)).next.bind(it);

		if (Array.isArray(o) \|\| (it = _unsupportedIterableToArray(o)) \|\| allowArrayLike && o && typeof o.length === "number") {
		if (it) o = it;
		var i = 0;
		return function () {
		if (i >= o.length) return {
		done: true
		};
		return {
		done: false,
		value: o[i++]
		};
		};
		}

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

		var _excluded$g = ["__themeKey", "__css", "variant", "css", "sx", "as"];
		var boxSystemProps = [// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', // color props (inherited from @styled-system/color)
		const boxSystemProps = [
		// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
		// color props (inherited from @styled-system/color)
		'color', 'backgroundColor', 'bg', 'opacity'];

		/**
		* @internal
		*/
		var __isBoxStyledSystemProp = function __isBoxStyledSystemProp(prop) {
		return boxSystemProps.includes(prop);
		};

		var pickSystemProps = function pickSystemProps(props) {
		var res = {};

		for (var _iterator = _createForOfIteratorHelperLoose(boxSystemProps), _step; !(_step = _iterator()).done;) {
		var key = _step.value;
		const __isBoxStyledSystemProp = prop => boxSystemProps.includes(prop);
		const pickSystemProps = props => {
		const res = {};
		for (const key of boxSystemProps) {
		res[key] = props[key];
		}

		return res;
		};

		/**
		@@ -111,19 +37,14 @@ * Use the Box component as a layout primitive to add margin, padding, and colors to content.
		*/


		var Box$1 = /#__PURE__/React.forwardRef(function Box(props, ref) {
		var theme = react.useTheme();

		var _ref = props,
		_ref$__themeKey = _ref.__themeKey,
		__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey,
		__css = _ref.__css,
		variant = _ref.variant,
		cssProp = _ref.css,
		sx = _ref.sx,
		_ref$as = _ref.as,
		Component = _ref$as === void 0 ? 'div' : _ref$as,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);

		var baseStyles = {
		const Box$1 = /#__PURE__/React.forwardRef(function Box(props, ref) {
		const theme = react.useTheme();
		const {
		__themeKey = 'variants',
		__css,
		variant,
		css: cssProp,
		sx,
		as: Component = 'div',
		...rest
		} = props;
		const baseStyles = {
		boxSizing: 'border-box',
		@@ -133,17 +54,16 @@ margin: 0,
		};

		var __cssStyles = css.css(__css)(theme);

		var variantInTheme = css.get(theme, __themeKey + "." + variant) \|\| css.get(theme, variant);
		var variantStyles = variantInTheme && css.css(variantInTheme)(theme);
		var sxPropStyles = css.css(sx)(theme);
		var systemPropsStyles = css.css(pickSystemProps(rest))(theme);
		var style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(function (name) {
		const __cssStyles = css.css(__css)(theme);
		const variantInTheme = css.get(theme, `${__themeKey}.${variant}`) \|\| css.get(theme, variant);
		const variantStyles = variantInTheme && css.css(variantInTheme)(theme);
		const sxPropStyles = css.css(sx)(theme);
		const systemPropsStyles = css.css(pickSystemProps(rest))(theme);
		const style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(name => {
		delete rest[name];
		});
		return react.jsx(Component, _extends({
		return jsxRuntime.jsx(Component, {
		ref: ref,
		css: style
		}, rest));
		css: style,
		...rest
		});
		});
		@@ -155,35 +75,29 @@
		*/
		var Flex = /#__PURE__/React__default["default"].forwardRef(function Flex(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, {
		sx: _extends({
		display: 'flex'
		}, props.sx)
		}));
		const Flex = /#__PURE__/React__default["default"].forwardRef(function Flex(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		sx: {
		display: 'flex',
		...props.sx
		}
		});
		});

		var getProps = function getProps(test) {
		return function (props) {
		var next = {};
		const getProps = test => props => {
		const next = {};
		for (const key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}
		return next;
		};
		const MRE = /^m[trblxy]?$/;
		const getMargin = getProps(k => MRE.test(k));
		const omitMargin = getProps(k => !MRE.test(k));

		for (var key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}

		return next;
		};
		};
		var MRE = /^m[trblxy]?$/;
		var getMargin = getProps(function (k) {
		return MRE.test(k);
		});
		var omitMargin = getProps(function (k) {
		return !MRE.test(k);
		});
		/** @internal */

		function __internalProps(props) {
		return props;
		}

		/**
		@@ -193,26 +107,7 @@ * @internal Props used by Theme UI Components not intended for user code.

		var _excluded$f = ["width", "columns", "gap", "repeat"];

		var px = function px(n) {
		return typeof n === 'number' ? n + 'px' : n;
		};

		var singleWidthToColumns = function singleWidthToColumns(width, repeat) {
		return width ? "repeat(auto-" + repeat + ", minmax(" + px(width) + ", 1fr))" : null;
		};

		var widthToColumns = function widthToColumns(width, repeat) {
		return Array.isArray(width) ? width.map(function (w) {
		return singleWidthToColumns(w, repeat);
		}) : singleWidthToColumns(width, repeat);
		};

		var singleCountToColumns = function singleCountToColumns(n) {
		return n ? typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n : null;
		};

		var countToColumns = function countToColumns(n) {
		return Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		};

		const px = n => typeof n === 'number' ? n + 'px' : n;
		const singleWidthToColumns = (width, repeat) => width ? `repeat(auto-${repeat}, minmax(${px(width)}, 1fr))` : null;
		const widthToColumns = (width, repeat) => Array.isArray(width) ? width.map(w => singleWidthToColumns(w, repeat)) : singleWidthToColumns(width, repeat);
		const singleCountToColumns = n => n ? typeof n === 'number' ? `repeat(${n}, 1fr)` : n : null;
		const countToColumns = n => Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		/**
		@@ -222,27 +117,26 @@ * CSS grid layout component to arrange direct child elements in a tiled grid layout.
		*/
		var Grid = /#__PURE__/React__default["default"].forwardRef(function Grid(_ref, ref) {
		var width = _ref.width,
		columns = _ref.columns,
		_ref$gap = _ref.gap,
		gap = _ref$gap === void 0 ? 3 : _ref$gap,
		_ref$repeat = _ref.repeat,
		repeat = _ref$repeat === void 0 ? 'fit' : _ref$repeat,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$f);

		var gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		var __css = {
		const Grid = /#__PURE__/React__default["default"].forwardRef(function Grid({
		width,
		columns,
		gap = 3,
		repeat = 'fit',
		...props
		}, ref) {
		const gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		const __css = {
		display: 'grid',
		gridGap: gap,
		gridTemplateColumns: gridTemplateColumns
		gridTemplateColumns
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'grids',
		__css: __css
		})));
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'grids',
		__css
		})
		});
		});

		var Box = Box$1;

		const Box = Box$1;
		/**
		@@ -252,24 +146,26 @@ * Primitive button component with variants
		*/
		var Button = /#__PURE__/React__default["default"].forwardRef(function Button(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box, _extends({
		const Button = /#__PURE__/React__default["default"].forwardRef(function Button(props, ref) {
		return jsxRuntime.jsx(Box, {
		ref: ref,
		as: "button",
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})
		});
		});
		@@ -282,10 +178,12 @@
		*/
		var Link = /#__PURE__/React__default["default"].forwardRef(function Link(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Link = /#__PURE__/React__default["default"].forwardRef(function Link(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "a",
		variant: "styles.a"
		}, props, __internalProps({
		__themeKey: 'links'
		})));
		variant: "styles.a",
		...props,
		...__internalProps({
		__themeKey: 'links'
		})
		});
		});
		@@ -300,15 +198,17 @@
		*/
		var Paragraph = /#__PURE__/React__default["default"].forwardRef(function Paragraph(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Paragraph = /#__PURE__/React__default["default"].forwardRef(function Paragraph(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "p",
		variant: "paragraph"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})));
		variant: "paragraph",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})
		});
		});
		@@ -322,10 +222,12 @@
		*/
		var Text = /#__PURE__/React__default["default"].forwardRef(function Text(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Text = /#__PURE__/React__default["default"].forwardRef(function Text(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		as: "span",
		ref: ref,
		variant: "default"
		}, props, __internalProps({
		__themeKey: 'text'
		})));
		variant: "default",
		...props,
		...__internalProps({
		__themeKey: 'text'
		})
		});
		});
		@@ -340,15 +242,17 @@
		*/
		var Heading = /#__PURE__/React__default["default"].forwardRef(function Heading(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Heading = /#__PURE__/React__default["default"].forwardRef(function Heading(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "h2",
		variant: "heading"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})));
		variant: "heading",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})
		});
		});
		@@ -360,14 +264,17 @@
		*/
		var Image = /#__PURE__/React__default["default"].forwardRef(function Image(props, ref) {
		var __outerCss = props.__css;
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Image = /#__PURE__/React__default["default"].forwardRef(function Image(props, ref) {
		const __outerCss = props.__css;
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "img"
		}, props, __internalProps({
		__themeKey: 'images',
		__css: _extends({
		maxWidth: '100%',
		height: 'auto'
		}, __outerCss)
		})));
		as: "img",
		...props,
		...__internalProps({
		__themeKey: 'images',
		__css: {
		maxWidth: '100%',
		height: 'auto',
		...__outerCss
		}
		})
		});
		});
		@@ -380,9 +287,11 @@
		*/
		var Card = /#__PURE__/React__default["default"].forwardRef(function Card(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Card = /#__PURE__/React__default["default"].forwardRef(function Card(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'cards'
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'cards'
		})
		});
		});
		@@ -395,18 +304,19 @@
		*/
		var Label = /#__PURE__/React__default["default"].forwardRef(function Label(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Label = /#__PURE__/React__default["default"].forwardRef(function Label(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "label",
		variant: "label"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})));
		variant: "label",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})
		});
		});

		var _excluded$e = ["sx", "autofillBackgroundColor"];
		var autofillStyles = {
		const autofillStyles = {
		boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)',
		@@ -418,3 +328,3 @@ fontSize: 'inherit',
		};
		var defaultInputStyles = {
		const defaultInputStyles = {
		display: 'block',
		@@ -433,3 +343,2 @@ width: '100%',
		};

		/**
		@@ -440,30 +349,28 @@ * Input variants can be defined in `theme.forms`
		*/
		var Input = /#__PURE__/React__default["default"].forwardRef(function Input(_ref, ref) {
		var sx = _ref.sx,
		_ref$autofillBackgrou = _ref.autofillBackgroundColor,
		autofillBackgroundColor = _ref$autofillBackgrou === void 0 ? 'background' : _ref$autofillBackgrou,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Input = /#__PURE__/React__default["default"].forwardRef(function Input({
		sx,
		autofillBackgroundColor = 'background',
		...rest
		}, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		variant: "input",
		sx: _extends({
		'--theme-ui-input-autofill-bg': function themeUiInputAutofillBg(theme) {
		return theme.colors && css.get(theme.colors, autofillBackgroundColor, null);
		}
		}, sx)
		}, rest, __internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})));
		sx: {
		'--theme-ui-input-autofill-bg': theme => theme.colors && css.get(theme.colors, autofillBackgroundColor, null),
		...sx
		},
		...rest,
		...__internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})
		});
		});

		var _excluded$d = ["size"];
		var SVG = /#__PURE__/React__default["default"].forwardRef(function SVG(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);

		var svgProps = _extends({
		const SVG = /#__PURE__/React__default["default"].forwardRef(function SVG({
		size = 24,
		...rest
		}, ref) {
		const svgProps = {
		xmlns: 'http://www.w3.org/2000/svg',
		@@ -473,20 +380,19 @@ width: size,
		viewBox: '0 0 24 24',
		fill: 'currentcolor'
		}, rest);

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		fill: 'currentcolor',
		...rest
		};
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps));
		as: "svg",
		...svgProps
		});
		});
		SVG.displayName = 'SVG';

		var _excluded$c = ["arrow"];

		var DownArrow = function DownArrow(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const DownArrow = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("path", {
		d: "M7 10l5 5 5-5z"
		}));
		};

		})
		});
		/**
		@@ -497,7 +403,7 @@ * Select variants can be defined in `theme.forms`
		*/
		var Select = /#__PURE__/React__default["default"].forwardRef(function Select(_ref, ref) {
		var arrow = _ref.arrow,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$c);

		var __css = {
		const Select = /#__PURE__/React__default["default"].forwardRef(function Select({
		arrow,
		...props
		}, ref) {
		const __css = {
		display: 'block',
		@@ -513,24 +419,26 @@ width: '100%',
		color: 'inherit',
		backgroundColor: function backgroundColor(theme) {
		return css.get(theme, 'colors.background', null);
		}
		backgroundColor: theme => css.get(theme, 'colors.background', null)
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({}, getMargin(props), {
		return jsxRuntime.jsxs(Box$1, {
		...getMargin(props),
		sx: {
		display: 'flex'
		}
		}), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "select",
		variant: "select"
		}, omitMargin(props), __internalProps({
		__themeKey: 'forms',
		__css: __css
		}))), arrow \|\| /#__PURE__/React__default["default"].createElement(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		}));
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "select",
		variant: "select",
		...omitMargin(props),
		...__internalProps({
		__themeKey: 'forms',
		__css
		})
		}), arrow \|\| jsxRuntime.jsx(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		})]
		});
		});
		@@ -545,56 +453,61 @@
		*/
		var Textarea = /#__PURE__/React__default["default"].forwardRef(function Textarea(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Textarea = /#__PURE__/React__default["default"].forwardRef(function Textarea(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "textarea",
		variant: "textarea"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		display: 'block',
		width: '100%',
		p: 2,
		appearance: 'none',
		fontSize: 'inherit',
		lineHeight: 'inherit',
		border: '1px solid',
		borderRadius: 4,
		color: 'inherit',
		bg: 'transparent'
		}
		})));
		variant: "textarea",
		...props,
		...__internalProps({
		__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 _excluded$b = ["className", "sx", "variant"];

		var RadioChecked = function RadioChecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const RadioChecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 RadioUnchecked = function RadioUnchecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		})
		});
		const RadioUnchecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 RadioIcon(props) {
		return /#__PURE__/React__default["default"].createElement(React__default["default"].Fragment, null, /#__PURE__/React__default["default"].createElement(RadioChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const RadioIcon = props => jsxRuntime.jsxs(React__default["default"].Fragment, {
		children: [jsxRuntime.jsx(RadioChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React__default["default"].createElement(RadioUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsxRuntime.jsx(RadioUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -607,81 +520,85 @@ * Form radio input component
		*/
		var Radio = /#__PURE__/React__default["default"].forwardRef(function Radio(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$b);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const Radio = /#__PURE__/React__default["default"].forwardRef(function Radio({
		className,
		sx,
		variant = 'radio',
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "radio"
		}, props, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "radio",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))));
		}), jsxRuntime.jsx(Box$1, {
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		}
		}
		})
		})]
		});
		});

		var _excluded$a = ["className", "sx", "variant", "children"];

		var CheckboxChecked = function CheckboxChecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const CheckboxChecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 CheckboxUnchecked = function CheckboxUnchecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		})
		});
		const CheckboxUnchecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 CheckboxIcon(props) {
		return /#__PURE__/React__default["default"].createElement(React__default["default"].Fragment, null, /#__PURE__/React__default["default"].createElement(CheckboxChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const CheckboxIcon = props => jsxRuntime.jsxs(React__default["default"].Fragment, {
		children: [jsxRuntime.jsx(CheckboxChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React__default["default"].createElement(CheckboxUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsxRuntime.jsx(CheckboxUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -694,55 +611,54 @@ * Form checkbox input component
		*/
		var Checkbox = /#__PURE__/React__default["default"].forwardRef(function Checkbox(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$a);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const Checkbox = /#__PURE__/React__default["default"].forwardRef(function Checkbox({
		className,
		sx,
		variant = 'checkbox',
		children,
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "checkbox"
		}, props, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))), children);
		}), jsxRuntime.jsx(Box$1, {
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		}
		}
		})
		}), children]
		});
		});

		var _excluded$9 = ["className", "label", "sx", "variant"];
		var GUTTER = 2;
		var SIZE = 18;

		const GUTTER = 2;
		const SIZE = 18;
		/**
		@@ -754,11 +670,10 @@ * Form switch component
		*/
		var Switch = /#__PURE__/React__default["default"].forwardRef(function Switch(_ref, ref) {
		var className = _ref.className,
		label = _ref.label,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'switch' : _ref$variant,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);

		var __css = {
		const Switch = /#__PURE__/React__default["default"].forwardRef(function Switch({
		className,
		label,
		sx,
		variant = 'switch',
		...rest
		}, ref) {
		const __css = {
		position: 'relative',
		@@ -785,3 +700,3 @@ flexShrink: 0,
		transform: 'translateX(0%)',
		transition: "transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)"
		transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`
		},
		@@ -795,36 +710,42 @@ 'input:checked ~ &': {
		};
		return /#__PURE__/React__default["default"].createElement(Label, {
		return jsxRuntime.jsxs(Label, {
		sx: {
		cursor: 'pointer'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label
		}, rest, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}, __internalProps({
		__themeKey: 'forms'
		}))), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: __css
		})), /#__PURE__/React__default["default"].createElement(Box$1, null)), /#__PURE__/React__default["default"].createElement("span", null, label));
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label,
		...rest,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		},
		...__internalProps({
		__themeKey: 'forms'
		})
		}), jsxRuntime.jsx(Box$1, {
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css
		}),
		children: jsxRuntime.jsx(Box$1, {})
		}), jsxRuntime.jsx("span", {
		children: label
		})]
		});
		});

		var thumbStyle = {
		const thumbStyle = {
		appearance: 'none',
		@@ -838,3 +759,3 @@ width: 16,
		};
		var sliderStyle = {
		const sliderStyle = {
		display: 'block',
		@@ -857,3 +778,2 @@ width: '100%',
		};

		/**
		@@ -866,34 +786,40 @@ * Range input element
		*/
		var Slider = /#__PURE__/React__default["default"].forwardRef(function Slider(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Slider = /#__PURE__/React__default["default"].forwardRef(function Slider(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "range",
		variant: "slider"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})));
		variant: "slider",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})
		});
		});

		var _excluded$8 = ["as", "label", "id", "name"];
		var Field = /#__PURE__/React__default["default"].forwardRef(function Field(_ref, ref) {
		var _ref$as = _ref.as,
		Control = _ref$as === void 0 ? Input : _ref$as,
		label = _ref.label,
		id = _ref.id,
		name = _ref.name,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);

		var fieldIdentifier = id \|\| name;

		var controlProps = _extends({
		ref: ref,
		name: name,
		id: fieldIdentifier
		}, omitMargin(rest));

		return /#__PURE__/React__default["default"].createElement(Box$1, getMargin(rest), /#__PURE__/React__default["default"].createElement(Label, {
		htmlFor: fieldIdentifier
		}, label), /#__PURE__/React__default["default"].createElement(Control, controlProps));
		const Field = /#__PURE__/React__default["default"].forwardRef(function Field({
		// if somebody specifies the generic parameter without passing `as` prop, they get Input anyway
		as: Control = Input,
		label,
		id,
		name,
		...rest
		}, ref) {
		const fieldIdentifier = id \|\| name;
		const controlProps = {
		ref,
		name,
		id: fieldIdentifier,
		...omitMargin(rest)
		};
		return jsxRuntime.jsxs(Box$1, {
		...getMargin(rest),
		children: [jsxRuntime.jsx(Label, {
		htmlFor: fieldIdentifier,
		children: label
		}), jsxRuntime.jsx(Control, {
		...controlProps
		})]
		});
		}); // Field is generic bcs of `as` prop, so we can't just use types from forwardRef
		@@ -905,4 +831,4 @@
		*/
		var Progress = /#__PURE__/React__default["default"].forwardRef(function Progress(props, ref) {
		var __css = {
		const Progress = /#__PURE__/React__default["default"].forwardRef(function Progress(props, ref) {
		const __css = {
		display: 'block',
		@@ -929,13 +855,13 @@ width: '100%',
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "progress",
		variant: "styles.progress"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "styles.progress",
		...props,
		...__internalProps({
		__css
		})
		});
		});

		var _excluded$7 = ["size", "strokeWidth", "value", "min", "max", "title"];

		/**
		@@ -945,21 +871,16 @@ * Single value SVG donut chart
		*/
		var Donut = /#__PURE__/React__default["default"].forwardRef(function Donut(_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, _excluded$7);

		var r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		var C = 2 * r * Math.PI;
		var offset = C - (value - min) / (max - min) * C;
		var svgProps = {
		strokeWidth: strokeWidth,
		const Donut = /#__PURE__/React__default["default"].forwardRef(function Donut({
		size = 128,
		strokeWidth = 2,
		value = 0,
		min = 0,
		max = 1,
		title,
		...props
		}, ref) {
		const r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		const C = 2 * r * Math.PI;
		const offset = C - (value - min) / (max - min) * C;
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -971,3 +892,3 @@ width: size,
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		@@ -978,41 +899,42 @@ as: "svg",
		"aria-valuemin": min,
		"aria-valuemax": max
		}, svgProps, props, __internalProps({
		__css: {
		color: 'primary'
		}
		})), title && /#__PURE__/React__default["default"].createElement("title", null, title), /#__PURE__/React__default["default"].createElement("circle", {
		cx: 16,
		cy: 16,
		r: r,
		opacity: 1 / 8
		}), /#__PURE__/React__default["default"].createElement("circle", {
		cx: 16,
		cy: 16,
		r: r,
		strokeDasharray: C,
		strokeDashoffset: offset,
		transform: "rotate(-90 16 16)"
		}));
		"aria-valuemax": max,
		...svgProps,
		...props,
		...__internalProps({
		__css: {
		color: 'primary'
		}
		}),
		children: [title && jsxRuntime.jsx("title", {
		children: title
		}), jsxRuntime.jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		opacity: 1 / 8
		}), jsxRuntime.jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		strokeDasharray: C,
		strokeDashoffset: offset,
		transform: "rotate(-90 16 16)"
		})]
		});
		});

		var _excluded$6 = ["size", "strokeWidth", "max", "title", "duration"];
		var Spinner = /#__PURE__/React__default["default"].forwardRef(function Spinner(_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.max;
		var _ref$title = _ref.title,
		title = _ref$title === void 0 ? 'Loading' : _ref$title,
		_ref$duration = _ref.duration,
		duration = _ref$duration === void 0 ? 750 : _ref$duration,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$6);

		var __css = {
		const Spinner = /#__PURE__/React__default["default"].forwardRef(function Spinner({
		size = 48,
		strokeWidth = 4,
		max = 1,
		title = 'Loading',
		duration = 750,
		...props
		}, ref) {
		const __css = {
		color: 'primary',
		overflow: 'visible'
		};
		var svgProps = {
		strokeWidth: strokeWidth,
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -1025,4 +947,4 @@ width: size,
		};
		var circleProps = {
		strokeWidth: strokeWidth,
		const circleProps = {
		strokeWidth,
		r: 16 - strokeWidth,
		@@ -1033,62 +955,71 @@ cx: 16,
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps, props, __internalProps({
		__css: __css
		})), /#__PURE__/React__default["default"].createElement("title", null, title), /#__PURE__/React__default["default"].createElement("circle", _extends({}, circleProps, {
		opacity: 1 / 8
		})), /#__PURE__/React__default["default"].createElement("circle", _extends({}, circleProps, {
		strokeDasharray: "20 110"
		}), /#__PURE__/React__default["default"].createElement("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: duration + "ms",
		repeatCount: "indefinite"
		})));
		as: "svg",
		...svgProps,
		...props,
		...__internalProps({
		__css
		}),
		children: [jsxRuntime.jsx("title", {
		children: title
		}), jsxRuntime.jsx("circle", {
		...circleProps,
		opacity: 1 / 8
		}), jsxRuntime.jsx("circle", {
		...circleProps,
		strokeDasharray: "20 110",
		children: jsxRuntime.jsx("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: `${duration}ms`,
		repeatCount: "indefinite"
		})
		})]
		});
		});

		var _excluded$5 = ["size"];
		var Avatar = /#__PURE__/React__default["default"].forwardRef(function Avatar(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 48 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$5);

		return /#__PURE__/React__default["default"].createElement(Image, _extends({
		const Avatar = /#__PURE__/React__default["default"].forwardRef(function Avatar({
		size = 48,
		...props
		}, ref) {
		return jsxRuntime.jsx(Image, {
		ref: ref,
		width: size,
		height: size,
		variant: "avatar"
		}, props, __internalProps({
		__css: {
		borderRadius: 9999
		}
		})));
		variant: "avatar",
		...props,
		...__internalProps({
		__css: {
		borderRadius: 9999
		}
		})
		});
		});

		var Badge = /#__PURE__/React__default["default"].forwardRef(function Badge(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Badge = /#__PURE__/React__default["default"].forwardRef(function Badge(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})
		});
		});

		var _excluded$4 = ["size"];

		/**
		@@ -1102,35 +1033,34 @@ * Transparent button for SVG icons
		*/
		var IconButton = /#__PURE__/React__default["default"].forwardRef(function IconButton(_ref, ref) {
		const IconButton = /#__PURE__/React__default["default"].forwardRef(function IconButton({
		size = 32,
		...props
		}, ref) {
		var _css;

		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$4);

		var emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "button",
		variant: "icon"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})));
		variant: "icon",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})
		});
		});

		var _excluded$3 = ["size"];
		var CloseIcon = /#__PURE__/React__default["default"].createElement("svg", {
		const CloseIcon = jsxRuntime.jsx("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		@@ -1140,7 +1070,7 @@ width: "24",
		fill: "currentColor",
		viewBox: "0 0 24 24"
		}, /#__PURE__/React__default["default"].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"
		}));

		viewBox: "0 0 24 24",
		children: jsxRuntime.jsx("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"
		})
		});
		/**
		@@ -1155,8 +1085,7 @@ * Button with close (×) icon.
		*/
		var Close = /#__PURE__/React__default["default"].forwardRef(function Close(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$3);

		return /#__PURE__/React__default["default"].createElement(IconButton, _extends({
		const Close = /#__PURE__/React__default["default"].forwardRef(function Close({
		size = 32,
		...props
		}, ref) {
		return jsxRuntime.jsx(IconButton, {
		ref: ref,
		@@ -1166,6 +1095,6 @@ size: size,
		"aria-label": "Close",
		variant: "close"
		}, props, {
		variant: "close",
		...props,
		children: CloseIcon
		}));
		});
		});
		@@ -1179,19 +1108,21 @@
		*/
		var Alert = /#__PURE__/React__default["default"].forwardRef(function Alert(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Alert = /#__PURE__/React__default["default"].forwardRef(function Alert(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})
		});
		});
		@@ -1202,24 +1133,22 @@
		*/
		var Divider = /#__PURE__/React__default["default"].forwardRef(function Divider(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Divider = /#__PURE__/React__default["default"].forwardRef(function Divider(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "hr",
		variant: "styles.hr"
		}, props, __internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})));
		variant: "styles.hr",
		...props,
		...__internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})
		});
		});

		var _excluded$2 = ["variant", "sx", "ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"];
		var getContainerProps = getProps(__isBoxStyledSystemProp);
		var getIframeProps = getProps(function (str) {
		return !__isBoxStyledSystemProp(str);
		});

		const getContainerProps = getProps(__isBoxStyledSystemProp);
		const getIframeProps = getProps(str => !__isBoxStyledSystemProp(str));
		/**
		@@ -1232,57 +1161,55 @@ * Responsive iframe for video embeds.
		*/
		var Embed = /#__PURE__/React__default["default"].forwardRef(function Embed(_ref, ref) {
		var variant = _ref.variant,
		sx = _ref.sx,
		_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,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);

		var iframeProps = _extends({
		src: src,
		width: width,
		height: height,
		frameBorder: frameBorder,
		allowFullScreen: allowFullScreen,
		allow: allow
		}, getIframeProps(rest));

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Embed = /#__PURE__/React__default["default"].forwardRef(function Embed({
		variant,
		sx,
		ratio = 16 / 9,
		src,
		frameBorder = 0,
		allowFullScreen = true,
		width = 560,
		height = 315,
		allow,
		...rest
		}, ref) {
		const iframeProps = {
		src,
		width,
		height,
		frameBorder,
		allowFullScreen,
		allow,
		...getIframeProps(rest)
		};
		return jsxRuntime.jsx(Box$1, {
		variant: variant,
		sx: sx
		}, getContainerProps(rest), __internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "iframe"
		}, iframeProps, __internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		}))));
		sx: sx,
		...getContainerProps(rest),
		...__internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		}),
		children: jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "iframe",
		...iframeProps,
		...__internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		})
		})
		});
		});

		var _excluded$1 = ["ratio", "children"];

		/**
		@@ -1292,9 +1219,8 @@ * Component for maintaining a fluid-width aspect ratio
		*/
		var AspectRatio = /#__PURE__/React__default["default"].forwardRef(function AspectRatio(_ref, ref) {
		var _ref$ratio = _ref.ratio,
		ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$1);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const AspectRatio = /#__PURE__/React__default["default"].forwardRef(function AspectRatio({
		ratio = 4 / 3,
		children,
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		@@ -1304,22 +1230,25 @@ sx: {
		overflow: 'hidden'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), /#__PURE__/React__default["default"].createElement(Box$1, _extends({}, props, __internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		})), children));
		},
		children: [jsxRuntime.jsx(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), jsxRuntime.jsx(Box$1, {
		...props,
		...__internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		}),
		children: children
		})]
		});
		});

		var _excluded = ["ratio"];

		/**
		@@ -1329,15 +1258,18 @@ * Image component constrained by as aspect ratio.
		*/
		var AspectImage = /#__PURE__/React__default["default"].forwardRef(function AspectImage(_ref, ref) {
		var ratio = _ref.ratio,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);

		return /#__PURE__/React__default["default"].createElement(AspectRatio, {
		ratio: ratio
		}, /#__PURE__/React__default["default"].createElement(Image, _extends({
		ref: ref
		}, props, __internalProps({
		__css: {
		objectFit: 'cover'
		}
		}))));
		const AspectImage = /#__PURE__/React__default["default"].forwardRef(function AspectImage({
		ratio,
		...props
		}, ref) {
		return jsxRuntime.jsx(AspectRatio, {
		ratio: ratio,
		children: jsxRuntime.jsx(Image, {
		ref: ref,
		...props,
		...__internalProps({
		__css: {
		objectFit: 'cover'
		}
		})
		})
		});
		});
		@@ -1352,14 +1284,16 @@
		*/
		var Container = /#__PURE__/React__default["default"].forwardRef(function Container(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Container = /#__PURE__/React__default["default"].forwardRef(function Container(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "container"
		}, props, __internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})));
		variant: "container",
		...props,
		...__internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})
		});
		});
		@@ -1374,4 +1308,4 @@
		*/
		var NavLink = /#__PURE__/React__default["default"].forwardRef(function NavLink(props, ref) {
		var __css = {
		const NavLink = /#__PURE__/React__default["default"].forwardRef(function NavLink(props, ref) {
		const __css = {
		color: 'inherit',
		@@ -1385,8 +1319,10 @@ textDecoration: 'none',
		};
		return /#__PURE__/React__default["default"].createElement(Link, _extends({
		return jsxRuntime.jsx(Link, {
		ref: ref,
		variant: "nav"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "nav",
		...props,
		...__internalProps({
		__css
		})
		});
		});
		@@ -1400,11 +1336,7 @@
		*/
		var Message = /#__PURE__/React__default["default"].forwardRef(function Message(props, ref) {
		var __css = {
		const Message = /#__PURE__/React__default["default"].forwardRef(function Message(props, ref) {
		const __css = {
		padding: 3,
		paddingLeft: function paddingLeft(t) {
		return t.space && Number(t.space[3]) - Number(t.space[1]);
		},
		borderLeftWidth: function borderLeftWidth(t) {
		return t.space && Number(t.space[1]);
		},
		paddingLeft: t => t.space && Number(t.space[3]) - Number(t.space[1]),
		borderLeftWidth: t => t.space && Number(t.space[1]),
		borderLeftStyle: 'solid',
		@@ -1415,14 +1347,16 @@ borderLeftColor: 'primary',
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'messages',
		__css: __css
		})));
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'messages',
		__css
		})
		});
		});

		var MenuIcon = function MenuIcon(_ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size;
		return react.jsx("svg", {
		const MenuIcon = ({
		size = 24
		}) => {
		return jsxRuntime.jsx("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		@@ -1438,8 +1372,8 @@ viewBox: "0 0 24 24",
		minWidth: 0
		}
		}, react.jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		}));
		},
		children: jsxRuntime.jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		})
		});
		};

		/**
		@@ -1451,9 +1385,11 @@ * MenuButton variants can be defined in the `theme.buttons` object.
		*/
		var MenuButton = /#__PURE__/React__default["default"].forwardRef(function MenuButton(props, ref) {
		return react.jsx(IconButton, _extends({
		const MenuButton = /#__PURE__/React__default["default"].forwardRef(function MenuButton(props, ref) {
		return jsxRuntime.jsx(IconButton, {
		ref: ref,
		title: "Menu",
		"aria-label": "Toggle Menu",
		variant: "menu"
		}, props), react.jsx(MenuIcon, null));
		variant: "menu",
		...props,
		children: jsxRuntime.jsx(MenuIcon, {})
		});
		});
		@@ -1460,0 +1396,0 @@

1706

dist/theme-ui-components.cjs.prod.js

		@@ -8,2 +8,3 @@ 'use strict';
		var css = require('@theme-ui/css');
		var jsxRuntime = require('@theme-ui/core/jsx-runtime');

		@@ -14,94 +15,19 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

		function _extends() {
		_extends = Object.assign ? Object.assign.bind() : 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;
		}

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

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

		return arr2;
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _createForOfIteratorHelperLoose(o, allowArrayLike) {
		var it = typeof Symbol !== "undefined" && o[Symbol.iterator] \|\| o["@@iterator"];
		if (it) return (it = it.call(o)).next.bind(it);

		if (Array.isArray(o) \|\| (it = _unsupportedIterableToArray(o)) \|\| allowArrayLike && o && typeof o.length === "number") {
		if (it) o = it;
		var i = 0;
		return function () {
		if (i >= o.length) return {
		done: true
		};
		return {
		done: false,
		value: o[i++]
		};
		};
		}

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

		var _excluded$g = ["__themeKey", "__css", "variant", "css", "sx", "as"];
		var boxSystemProps = [// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', // color props (inherited from @styled-system/color)
		const boxSystemProps = [
		// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
		// color props (inherited from @styled-system/color)
		'color', 'backgroundColor', 'bg', 'opacity'];

		/**
		* @internal
		*/
		var __isBoxStyledSystemProp = function __isBoxStyledSystemProp(prop) {
		return boxSystemProps.includes(prop);
		};

		var pickSystemProps = function pickSystemProps(props) {
		var res = {};

		for (var _iterator = _createForOfIteratorHelperLoose(boxSystemProps), _step; !(_step = _iterator()).done;) {
		var key = _step.value;
		const __isBoxStyledSystemProp = prop => boxSystemProps.includes(prop);
		const pickSystemProps = props => {
		const res = {};
		for (const key of boxSystemProps) {
		res[key] = props[key];
		}

		return res;
		};

		/**
		@@ -111,19 +37,14 @@ * Use the Box component as a layout primitive to add margin, padding, and colors to content.
		*/


		var Box$1 = /#__PURE__/React.forwardRef(function Box(props, ref) {
		var theme = react.useTheme();

		var _ref = props,
		_ref$__themeKey = _ref.__themeKey,
		__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey,
		__css = _ref.__css,
		variant = _ref.variant,
		cssProp = _ref.css,
		sx = _ref.sx,
		_ref$as = _ref.as,
		Component = _ref$as === void 0 ? 'div' : _ref$as,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);

		var baseStyles = {
		const Box$1 = /#__PURE__/React.forwardRef(function Box(props, ref) {
		const theme = react.useTheme();
		const {
		__themeKey = 'variants',
		__css,
		variant,
		css: cssProp,
		sx,
		as: Component = 'div',
		...rest
		} = props;
		const baseStyles = {
		boxSizing: 'border-box',
		@@ -133,17 +54,16 @@ margin: 0,
		};

		var __cssStyles = css.css(__css)(theme);

		var variantInTheme = css.get(theme, __themeKey + "." + variant) \|\| css.get(theme, variant);
		var variantStyles = variantInTheme && css.css(variantInTheme)(theme);
		var sxPropStyles = css.css(sx)(theme);
		var systemPropsStyles = css.css(pickSystemProps(rest))(theme);
		var style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(function (name) {
		const __cssStyles = css.css(__css)(theme);
		const variantInTheme = css.get(theme, `${__themeKey}.${variant}`) \|\| css.get(theme, variant);
		const variantStyles = variantInTheme && css.css(variantInTheme)(theme);
		const sxPropStyles = css.css(sx)(theme);
		const systemPropsStyles = css.css(pickSystemProps(rest))(theme);
		const style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(name => {
		delete rest[name];
		});
		return react.jsx(Component, _extends({
		return jsxRuntime.jsx(Component, {
		ref: ref,
		css: style
		}, rest));
		css: style,
		...rest
		});
		});
		@@ -155,35 +75,29 @@
		*/
		var Flex = /#__PURE__/React__default["default"].forwardRef(function Flex(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, {
		sx: _extends({
		display: 'flex'
		}, props.sx)
		}));
		const Flex = /#__PURE__/React__default["default"].forwardRef(function Flex(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		sx: {
		display: 'flex',
		...props.sx
		}
		});
		});

		var getProps = function getProps(test) {
		return function (props) {
		var next = {};
		const getProps = test => props => {
		const next = {};
		for (const key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}
		return next;
		};
		const MRE = /^m[trblxy]?$/;
		const getMargin = getProps(k => MRE.test(k));
		const omitMargin = getProps(k => !MRE.test(k));

		for (var key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}

		return next;
		};
		};
		var MRE = /^m[trblxy]?$/;
		var getMargin = getProps(function (k) {
		return MRE.test(k);
		});
		var omitMargin = getProps(function (k) {
		return !MRE.test(k);
		});
		/** @internal */

		function __internalProps(props) {
		return props;
		}

		/**
		@@ -193,26 +107,7 @@ * @internal Props used by Theme UI Components not intended for user code.

		var _excluded$f = ["width", "columns", "gap", "repeat"];

		var px = function px(n) {
		return typeof n === 'number' ? n + 'px' : n;
		};

		var singleWidthToColumns = function singleWidthToColumns(width, repeat) {
		return width ? "repeat(auto-" + repeat + ", minmax(" + px(width) + ", 1fr))" : null;
		};

		var widthToColumns = function widthToColumns(width, repeat) {
		return Array.isArray(width) ? width.map(function (w) {
		return singleWidthToColumns(w, repeat);
		}) : singleWidthToColumns(width, repeat);
		};

		var singleCountToColumns = function singleCountToColumns(n) {
		return n ? typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n : null;
		};

		var countToColumns = function countToColumns(n) {
		return Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		};

		const px = n => typeof n === 'number' ? n + 'px' : n;
		const singleWidthToColumns = (width, repeat) => width ? `repeat(auto-${repeat}, minmax(${px(width)}, 1fr))` : null;
		const widthToColumns = (width, repeat) => Array.isArray(width) ? width.map(w => singleWidthToColumns(w, repeat)) : singleWidthToColumns(width, repeat);
		const singleCountToColumns = n => n ? typeof n === 'number' ? `repeat(${n}, 1fr)` : n : null;
		const countToColumns = n => Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		/**
		@@ -222,27 +117,26 @@ * CSS grid layout component to arrange direct child elements in a tiled grid layout.
		*/
		var Grid = /#__PURE__/React__default["default"].forwardRef(function Grid(_ref, ref) {
		var width = _ref.width,
		columns = _ref.columns,
		_ref$gap = _ref.gap,
		gap = _ref$gap === void 0 ? 3 : _ref$gap,
		_ref$repeat = _ref.repeat,
		repeat = _ref$repeat === void 0 ? 'fit' : _ref$repeat,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$f);

		var gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		var __css = {
		const Grid = /#__PURE__/React__default["default"].forwardRef(function Grid({
		width,
		columns,
		gap = 3,
		repeat = 'fit',
		...props
		}, ref) {
		const gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		const __css = {
		display: 'grid',
		gridGap: gap,
		gridTemplateColumns: gridTemplateColumns
		gridTemplateColumns
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'grids',
		__css: __css
		})));
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'grids',
		__css
		})
		});
		});

		var Box = Box$1;

		const Box = Box$1;
		/**
		@@ -252,24 +146,26 @@ * Primitive button component with variants
		*/
		var Button = /#__PURE__/React__default["default"].forwardRef(function Button(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box, _extends({
		const Button = /#__PURE__/React__default["default"].forwardRef(function Button(props, ref) {
		return jsxRuntime.jsx(Box, {
		ref: ref,
		as: "button",
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})
		});
		});
		@@ -282,10 +178,12 @@
		*/
		var Link = /#__PURE__/React__default["default"].forwardRef(function Link(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Link = /#__PURE__/React__default["default"].forwardRef(function Link(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "a",
		variant: "styles.a"
		}, props, __internalProps({
		__themeKey: 'links'
		})));
		variant: "styles.a",
		...props,
		...__internalProps({
		__themeKey: 'links'
		})
		});
		});
		@@ -300,15 +198,17 @@
		*/
		var Paragraph = /#__PURE__/React__default["default"].forwardRef(function Paragraph(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Paragraph = /#__PURE__/React__default["default"].forwardRef(function Paragraph(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "p",
		variant: "paragraph"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})));
		variant: "paragraph",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})
		});
		});
		@@ -322,10 +222,12 @@
		*/
		var Text = /#__PURE__/React__default["default"].forwardRef(function Text(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Text = /#__PURE__/React__default["default"].forwardRef(function Text(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		as: "span",
		ref: ref,
		variant: "default"
		}, props, __internalProps({
		__themeKey: 'text'
		})));
		variant: "default",
		...props,
		...__internalProps({
		__themeKey: 'text'
		})
		});
		});
		@@ -340,15 +242,17 @@
		*/
		var Heading = /#__PURE__/React__default["default"].forwardRef(function Heading(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Heading = /#__PURE__/React__default["default"].forwardRef(function Heading(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "h2",
		variant: "heading"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})));
		variant: "heading",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})
		});
		});
		@@ -360,14 +264,17 @@
		*/
		var Image = /#__PURE__/React__default["default"].forwardRef(function Image(props, ref) {
		var __outerCss = props.__css;
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Image = /#__PURE__/React__default["default"].forwardRef(function Image(props, ref) {
		const __outerCss = props.__css;
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "img"
		}, props, __internalProps({
		__themeKey: 'images',
		__css: _extends({
		maxWidth: '100%',
		height: 'auto'
		}, __outerCss)
		})));
		as: "img",
		...props,
		...__internalProps({
		__themeKey: 'images',
		__css: {
		maxWidth: '100%',
		height: 'auto',
		...__outerCss
		}
		})
		});
		});
		@@ -380,9 +287,11 @@
		*/
		var Card = /#__PURE__/React__default["default"].forwardRef(function Card(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Card = /#__PURE__/React__default["default"].forwardRef(function Card(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'cards'
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'cards'
		})
		});
		});
		@@ -395,18 +304,19 @@
		*/
		var Label = /#__PURE__/React__default["default"].forwardRef(function Label(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Label = /#__PURE__/React__default["default"].forwardRef(function Label(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "label",
		variant: "label"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})));
		variant: "label",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})
		});
		});

		var _excluded$e = ["sx", "autofillBackgroundColor"];
		var autofillStyles = {
		const autofillStyles = {
		boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)',
		@@ -418,3 +328,3 @@ fontSize: 'inherit',
		};
		var defaultInputStyles = {
		const defaultInputStyles = {
		display: 'block',
		@@ -433,3 +343,2 @@ width: '100%',
		};

		/**
		@@ -440,30 +349,28 @@ * Input variants can be defined in `theme.forms`
		*/
		var Input = /#__PURE__/React__default["default"].forwardRef(function Input(_ref, ref) {
		var sx = _ref.sx,
		_ref$autofillBackgrou = _ref.autofillBackgroundColor,
		autofillBackgroundColor = _ref$autofillBackgrou === void 0 ? 'background' : _ref$autofillBackgrou,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Input = /#__PURE__/React__default["default"].forwardRef(function Input({
		sx,
		autofillBackgroundColor = 'background',
		...rest
		}, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		variant: "input",
		sx: _extends({
		'--theme-ui-input-autofill-bg': function themeUiInputAutofillBg(theme) {
		return theme.colors && css.get(theme.colors, autofillBackgroundColor, null);
		}
		}, sx)
		}, rest, __internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})));
		sx: {
		'--theme-ui-input-autofill-bg': theme => theme.colors && css.get(theme.colors, autofillBackgroundColor, null),
		...sx
		},
		...rest,
		...__internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})
		});
		});

		var _excluded$d = ["size"];
		var SVG = /#__PURE__/React__default["default"].forwardRef(function SVG(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);

		var svgProps = _extends({
		const SVG = /#__PURE__/React__default["default"].forwardRef(function SVG({
		size = 24,
		...rest
		}, ref) {
		const svgProps = {
		xmlns: 'http://www.w3.org/2000/svg',
		@@ -473,20 +380,19 @@ width: size,
		viewBox: '0 0 24 24',
		fill: 'currentcolor'
		}, rest);

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		fill: 'currentcolor',
		...rest
		};
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps));
		as: "svg",
		...svgProps
		});
		});
		SVG.displayName = 'SVG';

		var _excluded$c = ["arrow"];

		var DownArrow = function DownArrow(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const DownArrow = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("path", {
		d: "M7 10l5 5 5-5z"
		}));
		};

		})
		});
		/**
		@@ -497,7 +403,7 @@ * Select variants can be defined in `theme.forms`
		*/
		var Select = /#__PURE__/React__default["default"].forwardRef(function Select(_ref, ref) {
		var arrow = _ref.arrow,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$c);

		var __css = {
		const Select = /#__PURE__/React__default["default"].forwardRef(function Select({
		arrow,
		...props
		}, ref) {
		const __css = {
		display: 'block',
		@@ -513,24 +419,26 @@ width: '100%',
		color: 'inherit',
		backgroundColor: function backgroundColor(theme) {
		return css.get(theme, 'colors.background', null);
		}
		backgroundColor: theme => css.get(theme, 'colors.background', null)
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({}, getMargin(props), {
		return jsxRuntime.jsxs(Box$1, {
		...getMargin(props),
		sx: {
		display: 'flex'
		}
		}), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "select",
		variant: "select"
		}, omitMargin(props), __internalProps({
		__themeKey: 'forms',
		__css: __css
		}))), arrow \|\| /#__PURE__/React__default["default"].createElement(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		}));
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "select",
		variant: "select",
		...omitMargin(props),
		...__internalProps({
		__themeKey: 'forms',
		__css
		})
		}), arrow \|\| jsxRuntime.jsx(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		})]
		});
		});
		@@ -545,56 +453,61 @@
		*/
		var Textarea = /#__PURE__/React__default["default"].forwardRef(function Textarea(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Textarea = /#__PURE__/React__default["default"].forwardRef(function Textarea(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "textarea",
		variant: "textarea"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		display: 'block',
		width: '100%',
		p: 2,
		appearance: 'none',
		fontSize: 'inherit',
		lineHeight: 'inherit',
		border: '1px solid',
		borderRadius: 4,
		color: 'inherit',
		bg: 'transparent'
		}
		})));
		variant: "textarea",
		...props,
		...__internalProps({
		__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 _excluded$b = ["className", "sx", "variant"];

		var RadioChecked = function RadioChecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const RadioChecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 RadioUnchecked = function RadioUnchecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		})
		});
		const RadioUnchecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 RadioIcon(props) {
		return /#__PURE__/React__default["default"].createElement(React__default["default"].Fragment, null, /#__PURE__/React__default["default"].createElement(RadioChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const RadioIcon = props => jsxRuntime.jsxs(React__default["default"].Fragment, {
		children: [jsxRuntime.jsx(RadioChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React__default["default"].createElement(RadioUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsxRuntime.jsx(RadioUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -607,81 +520,85 @@ * Form radio input component
		*/
		var Radio = /#__PURE__/React__default["default"].forwardRef(function Radio(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$b);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const Radio = /#__PURE__/React__default["default"].forwardRef(function Radio({
		className,
		sx,
		variant = 'radio',
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "radio"
		}, props, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "radio",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))));
		}), jsxRuntime.jsx(Box$1, {
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		}
		}
		})
		})]
		});
		});

		var _excluded$a = ["className", "sx", "variant", "children"];

		var CheckboxChecked = function CheckboxChecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		const CheckboxChecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 CheckboxUnchecked = function CheckboxUnchecked(props) {
		return /#__PURE__/React__default["default"].createElement(SVG, props, /#__PURE__/React__default["default"].createElement("path", {
		})
		});
		const CheckboxUnchecked = props => jsxRuntime.jsx(SVG, {
		...props,
		children: jsxRuntime.jsx("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 CheckboxIcon(props) {
		return /#__PURE__/React__default["default"].createElement(React__default["default"].Fragment, null, /#__PURE__/React__default["default"].createElement(CheckboxChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const CheckboxIcon = props => jsxRuntime.jsxs(React__default["default"].Fragment, {
		children: [jsxRuntime.jsx(CheckboxChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React__default["default"].createElement(CheckboxUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsxRuntime.jsx(CheckboxUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -694,55 +611,54 @@ * Form checkbox input component
		*/
		var Checkbox = /#__PURE__/React__default["default"].forwardRef(function Checkbox(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$a);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const Checkbox = /#__PURE__/React__default["default"].forwardRef(function Checkbox({
		className,
		sx,
		variant = 'checkbox',
		children,
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "checkbox"
		}, props, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		},
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))), children);
		}), jsxRuntime.jsx(Box$1, {
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		}
		}
		})
		}), children]
		});
		});

		var _excluded$9 = ["className", "label", "sx", "variant"];
		var GUTTER = 2;
		var SIZE = 18;

		const GUTTER = 2;
		const SIZE = 18;
		/**
		@@ -754,11 +670,10 @@ * Form switch component
		*/
		var Switch = /#__PURE__/React__default["default"].forwardRef(function Switch(_ref, ref) {
		var className = _ref.className,
		label = _ref.label,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'switch' : _ref$variant,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);

		var __css = {
		const Switch = /#__PURE__/React__default["default"].forwardRef(function Switch({
		className,
		label,
		sx,
		variant = 'switch',
		...rest
		}, ref) {
		const __css = {
		position: 'relative',
		@@ -785,3 +700,3 @@ flexShrink: 0,
		transform: 'translateX(0%)',
		transition: "transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)"
		transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`
		},
		@@ -795,36 +710,42 @@ 'input:checked ~ &': {
		};
		return /#__PURE__/React__default["default"].createElement(Label, {
		return jsxRuntime.jsxs(Label, {
		sx: {
		cursor: 'pointer'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label
		}, rest, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}, __internalProps({
		__themeKey: 'forms'
		}))), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: __css
		})), /#__PURE__/React__default["default"].createElement(Box$1, null)), /#__PURE__/React__default["default"].createElement("span", null, label));
		children: [jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label,
		...rest,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		},
		...__internalProps({
		__themeKey: 'forms'
		})
		}), jsxRuntime.jsx(Box$1, {
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css
		}),
		children: jsxRuntime.jsx(Box$1, {})
		}), jsxRuntime.jsx("span", {
		children: label
		})]
		});
		});

		var thumbStyle = {
		const thumbStyle = {
		appearance: 'none',
		@@ -838,3 +759,3 @@ width: 16,
		};
		var sliderStyle = {
		const sliderStyle = {
		display: 'block',
		@@ -857,3 +778,2 @@ width: '100%',
		};

		/**
		@@ -866,34 +786,40 @@ * Range input element
		*/
		var Slider = /#__PURE__/React__default["default"].forwardRef(function Slider(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Slider = /#__PURE__/React__default["default"].forwardRef(function Slider(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "range",
		variant: "slider"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})));
		variant: "slider",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})
		});
		});

		var _excluded$8 = ["as", "label", "id", "name"];
		var Field = /#__PURE__/React__default["default"].forwardRef(function Field(_ref, ref) {
		var _ref$as = _ref.as,
		Control = _ref$as === void 0 ? Input : _ref$as,
		label = _ref.label,
		id = _ref.id,
		name = _ref.name,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);

		var fieldIdentifier = id \|\| name;

		var controlProps = _extends({
		ref: ref,
		name: name,
		id: fieldIdentifier
		}, omitMargin(rest));

		return /#__PURE__/React__default["default"].createElement(Box$1, getMargin(rest), /#__PURE__/React__default["default"].createElement(Label, {
		htmlFor: fieldIdentifier
		}, label), /#__PURE__/React__default["default"].createElement(Control, controlProps));
		const Field = /#__PURE__/React__default["default"].forwardRef(function Field({
		// if somebody specifies the generic parameter without passing `as` prop, they get Input anyway
		as: Control = Input,
		label,
		id,
		name,
		...rest
		}, ref) {
		const fieldIdentifier = id \|\| name;
		const controlProps = {
		ref,
		name,
		id: fieldIdentifier,
		...omitMargin(rest)
		};
		return jsxRuntime.jsxs(Box$1, {
		...getMargin(rest),
		children: [jsxRuntime.jsx(Label, {
		htmlFor: fieldIdentifier,
		children: label
		}), jsxRuntime.jsx(Control, {
		...controlProps
		})]
		});
		}); // Field is generic bcs of `as` prop, so we can't just use types from forwardRef
		@@ -905,4 +831,4 @@
		*/
		var Progress = /#__PURE__/React__default["default"].forwardRef(function Progress(props, ref) {
		var __css = {
		const Progress = /#__PURE__/React__default["default"].forwardRef(function Progress(props, ref) {
		const __css = {
		display: 'block',
		@@ -929,13 +855,13 @@ width: '100%',
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "progress",
		variant: "styles.progress"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "styles.progress",
		...props,
		...__internalProps({
		__css
		})
		});
		});

		var _excluded$7 = ["size", "strokeWidth", "value", "min", "max", "title"];

		/**
		@@ -945,21 +871,16 @@ * Single value SVG donut chart
		*/
		var Donut = /#__PURE__/React__default["default"].forwardRef(function Donut(_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, _excluded$7);

		var r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		var C = 2 * r * Math.PI;
		var offset = C - (value - min) / (max - min) * C;
		var svgProps = {
		strokeWidth: strokeWidth,
		const Donut = /#__PURE__/React__default["default"].forwardRef(function Donut({
		size = 128,
		strokeWidth = 2,
		value = 0,
		min = 0,
		max = 1,
		title,
		...props
		}, ref) {
		const r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		const C = 2 * r * Math.PI;
		const offset = C - (value - min) / (max - min) * C;
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -971,3 +892,3 @@ width: size,
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		@@ -978,41 +899,42 @@ as: "svg",
		"aria-valuemin": min,
		"aria-valuemax": max
		}, svgProps, props, __internalProps({
		__css: {
		color: 'primary'
		}
		})), title && /#__PURE__/React__default["default"].createElement("title", null, title), /#__PURE__/React__default["default"].createElement("circle", {
		cx: 16,
		cy: 16,
		r: r,
		opacity: 1 / 8
		}), /#__PURE__/React__default["default"].createElement("circle", {
		cx: 16,
		cy: 16,
		r: r,
		strokeDasharray: C,
		strokeDashoffset: offset,
		transform: "rotate(-90 16 16)"
		}));
		"aria-valuemax": max,
		...svgProps,
		...props,
		...__internalProps({
		__css: {
		color: 'primary'
		}
		}),
		children: [title && jsxRuntime.jsx("title", {
		children: title
		}), jsxRuntime.jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		opacity: 1 / 8
		}), jsxRuntime.jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		strokeDasharray: C,
		strokeDashoffset: offset,
		transform: "rotate(-90 16 16)"
		})]
		});
		});

		var _excluded$6 = ["size", "strokeWidth", "max", "title", "duration"];
		var Spinner = /#__PURE__/React__default["default"].forwardRef(function Spinner(_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.max;
		var _ref$title = _ref.title,
		title = _ref$title === void 0 ? 'Loading' : _ref$title,
		_ref$duration = _ref.duration,
		duration = _ref$duration === void 0 ? 750 : _ref$duration,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$6);

		var __css = {
		const Spinner = /#__PURE__/React__default["default"].forwardRef(function Spinner({
		size = 48,
		strokeWidth = 4,
		max = 1,
		title = 'Loading',
		duration = 750,
		...props
		}, ref) {
		const __css = {
		color: 'primary',
		overflow: 'visible'
		};
		var svgProps = {
		strokeWidth: strokeWidth,
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -1025,4 +947,4 @@ width: size,
		};
		var circleProps = {
		strokeWidth: strokeWidth,
		const circleProps = {
		strokeWidth,
		r: 16 - strokeWidth,
		@@ -1033,62 +955,71 @@ cx: 16,
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps, props, __internalProps({
		__css: __css
		})), /#__PURE__/React__default["default"].createElement("title", null, title), /#__PURE__/React__default["default"].createElement("circle", _extends({}, circleProps, {
		opacity: 1 / 8
		})), /#__PURE__/React__default["default"].createElement("circle", _extends({}, circleProps, {
		strokeDasharray: "20 110"
		}), /#__PURE__/React__default["default"].createElement("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: duration + "ms",
		repeatCount: "indefinite"
		})));
		as: "svg",
		...svgProps,
		...props,
		...__internalProps({
		__css
		}),
		children: [jsxRuntime.jsx("title", {
		children: title
		}), jsxRuntime.jsx("circle", {
		...circleProps,
		opacity: 1 / 8
		}), jsxRuntime.jsx("circle", {
		...circleProps,
		strokeDasharray: "20 110",
		children: jsxRuntime.jsx("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: `${duration}ms`,
		repeatCount: "indefinite"
		})
		})]
		});
		});

		var _excluded$5 = ["size"];
		var Avatar = /#__PURE__/React__default["default"].forwardRef(function Avatar(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 48 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$5);

		return /#__PURE__/React__default["default"].createElement(Image, _extends({
		const Avatar = /#__PURE__/React__default["default"].forwardRef(function Avatar({
		size = 48,
		...props
		}, ref) {
		return jsxRuntime.jsx(Image, {
		ref: ref,
		width: size,
		height: size,
		variant: "avatar"
		}, props, __internalProps({
		__css: {
		borderRadius: 9999
		}
		})));
		variant: "avatar",
		...props,
		...__internalProps({
		__css: {
		borderRadius: 9999
		}
		})
		});
		});

		var Badge = /#__PURE__/React__default["default"].forwardRef(function Badge(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Badge = /#__PURE__/React__default["default"].forwardRef(function Badge(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})
		});
		});

		var _excluded$4 = ["size"];

		/**
		@@ -1102,35 +1033,34 @@ * Transparent button for SVG icons
		*/
		var IconButton = /#__PURE__/React__default["default"].forwardRef(function IconButton(_ref, ref) {
		const IconButton = /#__PURE__/React__default["default"].forwardRef(function IconButton({
		size = 32,
		...props
		}, ref) {
		var _css;

		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$4);

		var emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "button",
		variant: "icon"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})));
		variant: "icon",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})
		});
		});

		var _excluded$3 = ["size"];
		var CloseIcon = /#__PURE__/React__default["default"].createElement("svg", {
		const CloseIcon = jsxRuntime.jsx("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		@@ -1140,7 +1070,7 @@ width: "24",
		fill: "currentColor",
		viewBox: "0 0 24 24"
		}, /#__PURE__/React__default["default"].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"
		}));

		viewBox: "0 0 24 24",
		children: jsxRuntime.jsx("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"
		})
		});
		/**
		@@ -1155,8 +1085,7 @@ * Button with close (×) icon.
		*/
		var Close = /#__PURE__/React__default["default"].forwardRef(function Close(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$3);

		return /#__PURE__/React__default["default"].createElement(IconButton, _extends({
		const Close = /#__PURE__/React__default["default"].forwardRef(function Close({
		size = 32,
		...props
		}, ref) {
		return jsxRuntime.jsx(IconButton, {
		ref: ref,
		@@ -1166,6 +1095,6 @@ size: size,
		"aria-label": "Close",
		variant: "close"
		}, props, {
		variant: "close",
		...props,
		children: CloseIcon
		}));
		});
		});
		@@ -1179,19 +1108,21 @@
		*/
		var Alert = /#__PURE__/React__default["default"].forwardRef(function Alert(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Alert = /#__PURE__/React__default["default"].forwardRef(function Alert(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})
		});
		});
		@@ -1202,24 +1133,22 @@
		*/
		var Divider = /#__PURE__/React__default["default"].forwardRef(function Divider(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Divider = /#__PURE__/React__default["default"].forwardRef(function Divider(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "hr",
		variant: "styles.hr"
		}, props, __internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})));
		variant: "styles.hr",
		...props,
		...__internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})
		});
		});

		var _excluded$2 = ["variant", "sx", "ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"];
		var getContainerProps = getProps(__isBoxStyledSystemProp);
		var getIframeProps = getProps(function (str) {
		return !__isBoxStyledSystemProp(str);
		});

		const getContainerProps = getProps(__isBoxStyledSystemProp);
		const getIframeProps = getProps(str => !__isBoxStyledSystemProp(str));
		/**
		@@ -1232,57 +1161,55 @@ * Responsive iframe for video embeds.
		*/
		var Embed = /#__PURE__/React__default["default"].forwardRef(function Embed(_ref, ref) {
		var variant = _ref.variant,
		sx = _ref.sx,
		_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,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);

		var iframeProps = _extends({
		src: src,
		width: width,
		height: height,
		frameBorder: frameBorder,
		allowFullScreen: allowFullScreen,
		allow: allow
		}, getIframeProps(rest));

		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Embed = /#__PURE__/React__default["default"].forwardRef(function Embed({
		variant,
		sx,
		ratio = 16 / 9,
		src,
		frameBorder = 0,
		allowFullScreen = true,
		width = 560,
		height = 315,
		allow,
		...rest
		}, ref) {
		const iframeProps = {
		src,
		width,
		height,
		frameBorder,
		allowFullScreen,
		allow,
		...getIframeProps(rest)
		};
		return jsxRuntime.jsx(Box$1, {
		variant: variant,
		sx: sx
		}, getContainerProps(rest), __internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		})), /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref,
		as: "iframe"
		}, iframeProps, __internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		}))));
		sx: sx,
		...getContainerProps(rest),
		...__internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		}),
		children: jsxRuntime.jsx(Box$1, {
		ref: ref,
		as: "iframe",
		...iframeProps,
		...__internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		})
		})
		});
		});

		var _excluded$1 = ["ratio", "children"];

		/**
		@@ -1292,9 +1219,8 @@ * Component for maintaining a fluid-width aspect ratio
		*/
		var AspectRatio = /#__PURE__/React__default["default"].forwardRef(function AspectRatio(_ref, ref) {
		var _ref$ratio = _ref.ratio,
		ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$1);

		return /#__PURE__/React__default["default"].createElement(Box$1, {
		const AspectRatio = /#__PURE__/React__default["default"].forwardRef(function AspectRatio({
		ratio = 4 / 3,
		children,
		...props
		}, ref) {
		return jsxRuntime.jsxs(Box$1, {
		ref: ref,
		@@ -1304,22 +1230,25 @@ sx: {
		overflow: 'hidden'
		}
		}, /#__PURE__/React__default["default"].createElement(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), /#__PURE__/React__default["default"].createElement(Box$1, _extends({}, props, __internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		})), children));
		},
		children: [jsxRuntime.jsx(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), jsxRuntime.jsx(Box$1, {
		...props,
		...__internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		}),
		children: children
		})]
		});
		});

		var _excluded = ["ratio"];

		/**
		@@ -1329,15 +1258,18 @@ * Image component constrained by as aspect ratio.
		*/
		var AspectImage = /#__PURE__/React__default["default"].forwardRef(function AspectImage(_ref, ref) {
		var ratio = _ref.ratio,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);

		return /#__PURE__/React__default["default"].createElement(AspectRatio, {
		ratio: ratio
		}, /#__PURE__/React__default["default"].createElement(Image, _extends({
		ref: ref
		}, props, __internalProps({
		__css: {
		objectFit: 'cover'
		}
		}))));
		const AspectImage = /#__PURE__/React__default["default"].forwardRef(function AspectImage({
		ratio,
		...props
		}, ref) {
		return jsxRuntime.jsx(AspectRatio, {
		ratio: ratio,
		children: jsxRuntime.jsx(Image, {
		ref: ref,
		...props,
		...__internalProps({
		__css: {
		objectFit: 'cover'
		}
		})
		})
		});
		});
		@@ -1352,14 +1284,16 @@
		*/
		var Container = /#__PURE__/React__default["default"].forwardRef(function Container(props, ref) {
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		const Container = /#__PURE__/React__default["default"].forwardRef(function Container(props, ref) {
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		variant: "container"
		}, props, __internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})));
		variant: "container",
		...props,
		...__internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})
		});
		});
		@@ -1374,4 +1308,4 @@
		*/
		var NavLink = /#__PURE__/React__default["default"].forwardRef(function NavLink(props, ref) {
		var __css = {
		const NavLink = /#__PURE__/React__default["default"].forwardRef(function NavLink(props, ref) {
		const __css = {
		color: 'inherit',
		@@ -1385,8 +1319,10 @@ textDecoration: 'none',
		};
		return /#__PURE__/React__default["default"].createElement(Link, _extends({
		return jsxRuntime.jsx(Link, {
		ref: ref,
		variant: "nav"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "nav",
		...props,
		...__internalProps({
		__css
		})
		});
		});
		@@ -1400,11 +1336,7 @@
		*/
		var Message = /#__PURE__/React__default["default"].forwardRef(function Message(props, ref) {
		var __css = {
		const Message = /#__PURE__/React__default["default"].forwardRef(function Message(props, ref) {
		const __css = {
		padding: 3,
		paddingLeft: function paddingLeft(t) {
		return t.space && Number(t.space[3]) - Number(t.space[1]);
		},
		borderLeftWidth: function borderLeftWidth(t) {
		return t.space && Number(t.space[1]);
		},
		paddingLeft: t => t.space && Number(t.space[3]) - Number(t.space[1]),
		borderLeftWidth: t => t.space && Number(t.space[1]),
		borderLeftStyle: 'solid',
		@@ -1415,14 +1347,16 @@ borderLeftColor: 'primary',
		};
		return /#__PURE__/React__default["default"].createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'messages',
		__css: __css
		})));
		return jsxRuntime.jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'messages',
		__css
		})
		});
		});

		var MenuIcon = function MenuIcon(_ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size;
		return react.jsx("svg", {
		const MenuIcon = ({
		size = 24
		}) => {
		return jsxRuntime.jsx("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		@@ -1438,8 +1372,8 @@ viewBox: "0 0 24 24",
		minWidth: 0
		}
		}, react.jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		}));
		},
		children: jsxRuntime.jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		})
		});
		};

		/**
		@@ -1451,9 +1385,11 @@ * MenuButton variants can be defined in the `theme.buttons` object.
		*/
		var MenuButton = /#__PURE__/React__default["default"].forwardRef(function MenuButton(props, ref) {
		return react.jsx(IconButton, _extends({
		const MenuButton = /#__PURE__/React__default["default"].forwardRef(function MenuButton(props, ref) {
		return jsxRuntime.jsx(IconButton, {
		ref: ref,
		title: "Menu",
		"aria-label": "Toggle Menu",
		variant: "menu"
		}, props), react.jsx(MenuIcon, null));
		variant: "menu",
		...props,
		children: jsxRuntime.jsx(MenuIcon, {})
		});
		});
		@@ -1460,0 +1396,0 @@

1706

dist/theme-ui-components.esm.js

		@@ -1,97 +0,23 @@
		import { useTheme, jsx } from '@emotion/react';
		import { useTheme } from '@emotion/react';
		import React, { forwardRef } from 'react';
		import { css, get } from '@theme-ui/css';
		import { jsx, jsxs } from '@theme-ui/core/jsx-runtime';

		function _extends() {
		_extends = Object.assign ? Object.assign.bind() : 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;
		}

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

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

		return arr2;
		}

		function _unsupportedIterableToArray(o, minLen) {
		if (!o) return;
		if (typeof o === "string") return _arrayLikeToArray(o, minLen);
		var n = Object.prototype.toString.call(o).slice(8, -1);
		if (n === "Object" && o.constructor) n = o.constructor.name;
		if (n === "Map" \|\| n === "Set") return Array.from(o);
		if (n === "Arguments" \|\| /^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
		}

		function _createForOfIteratorHelperLoose(o, allowArrayLike) {
		var it = typeof Symbol !== "undefined" && o[Symbol.iterator] \|\| o["@@iterator"];
		if (it) return (it = it.call(o)).next.bind(it);

		if (Array.isArray(o) \|\| (it = _unsupportedIterableToArray(o)) \|\| allowArrayLike && o && typeof o.length === "number") {
		if (it) o = it;
		var i = 0;
		return function () {
		if (i >= o.length) return {
		done: true
		};
		return {
		done: false,
		value: o[i++]
		};
		};
		}

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

		var _excluded$g = ["__themeKey", "__css", "variant", "css", "sx", "as"];
		var boxSystemProps = [// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', // color props (inherited from @styled-system/color)
		const boxSystemProps = [
		// space scale props (inherited from @styled-system/space)
		'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
		// color props (inherited from @styled-system/color)
		'color', 'backgroundColor', 'bg', 'opacity'];

		/**
		* @internal
		*/
		var __isBoxStyledSystemProp = function __isBoxStyledSystemProp(prop) {
		return boxSystemProps.includes(prop);
		};

		var pickSystemProps = function pickSystemProps(props) {
		var res = {};

		for (var _iterator = _createForOfIteratorHelperLoose(boxSystemProps), _step; !(_step = _iterator()).done;) {
		var key = _step.value;
		const __isBoxStyledSystemProp = prop => boxSystemProps.includes(prop);
		const pickSystemProps = props => {
		const res = {};
		for (const key of boxSystemProps) {
		res[key] = props[key];
		}

		return res;
		};

		/**
		@@ -101,19 +27,14 @@ * Use the Box component as a layout primitive to add margin, padding, and colors to content.
		*/


		var Box$1 = /#__PURE__/forwardRef(function Box(props, ref) {
		var theme = useTheme();

		var _ref = props,
		_ref$__themeKey = _ref.__themeKey,
		__themeKey = _ref$__themeKey === void 0 ? 'variants' : _ref$__themeKey,
		__css = _ref.__css,
		variant = _ref.variant,
		cssProp = _ref.css,
		sx = _ref.sx,
		_ref$as = _ref.as,
		Component = _ref$as === void 0 ? 'div' : _ref$as,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);

		var baseStyles = {
		const Box$1 = /#__PURE__/forwardRef(function Box(props, ref) {
		const theme = useTheme();
		const {
		__themeKey = 'variants',
		__css,
		variant,
		css: cssProp,
		sx,
		as: Component = 'div',
		...rest
		} = props;
		const baseStyles = {
		boxSizing: 'border-box',
		@@ -123,17 +44,16 @@ margin: 0,
		};

		var __cssStyles = css(__css)(theme);

		var variantInTheme = get(theme, __themeKey + "." + variant) \|\| get(theme, variant);
		var variantStyles = variantInTheme && css(variantInTheme)(theme);
		var sxPropStyles = css(sx)(theme);
		var systemPropsStyles = css(pickSystemProps(rest))(theme);
		var style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(function (name) {
		const __cssStyles = css(__css)(theme);
		const variantInTheme = get(theme, `${__themeKey}.${variant}`) \|\| get(theme, variant);
		const variantStyles = variantInTheme && css(variantInTheme)(theme);
		const sxPropStyles = css(sx)(theme);
		const systemPropsStyles = css(pickSystemProps(rest))(theme);
		const style = [baseStyles, __cssStyles, variantStyles, sxPropStyles, systemPropsStyles, cssProp];
		boxSystemProps.forEach(name => {
		delete rest[name];
		});
		return jsx(Component, _extends({
		return jsx(Component, {
		ref: ref,
		css: style
		}, rest));
		css: style,
		...rest
		});
		});
		@@ -145,35 +65,29 @@
		*/
		var Flex = /#__PURE__/React.forwardRef(function Flex(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref
		}, props, {
		sx: _extends({
		display: 'flex'
		}, props.sx)
		}));
		const Flex = /#__PURE__/React.forwardRef(function Flex(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		...props,
		sx: {
		display: 'flex',
		...props.sx
		}
		});
		});

		var getProps = function getProps(test) {
		return function (props) {
		var next = {};
		const getProps = test => props => {
		const next = {};
		for (const key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}
		return next;
		};
		const MRE = /^m[trblxy]?$/;
		const getMargin = getProps(k => MRE.test(k));
		const omitMargin = getProps(k => !MRE.test(k));

		for (var key in props) {
		if (test(key \|\| '')) next[key] = props[key];
		}

		return next;
		};
		};
		var MRE = /^m[trblxy]?$/;
		var getMargin = getProps(function (k) {
		return MRE.test(k);
		});
		var omitMargin = getProps(function (k) {
		return !MRE.test(k);
		});
		/** @internal */

		function __internalProps(props) {
		return props;
		}

		/**
		@@ -183,26 +97,7 @@ * @internal Props used by Theme UI Components not intended for user code.

		var _excluded$f = ["width", "columns", "gap", "repeat"];

		var px = function px(n) {
		return typeof n === 'number' ? n + 'px' : n;
		};

		var singleWidthToColumns = function singleWidthToColumns(width, repeat) {
		return width ? "repeat(auto-" + repeat + ", minmax(" + px(width) + ", 1fr))" : null;
		};

		var widthToColumns = function widthToColumns(width, repeat) {
		return Array.isArray(width) ? width.map(function (w) {
		return singleWidthToColumns(w, repeat);
		}) : singleWidthToColumns(width, repeat);
		};

		var singleCountToColumns = function singleCountToColumns(n) {
		return n ? typeof n === 'number' ? "repeat(" + n + ", 1fr)" : n : null;
		};

		var countToColumns = function countToColumns(n) {
		return Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		};

		const px = n => typeof n === 'number' ? n + 'px' : n;
		const singleWidthToColumns = (width, repeat) => width ? `repeat(auto-${repeat}, minmax(${px(width)}, 1fr))` : null;
		const widthToColumns = (width, repeat) => Array.isArray(width) ? width.map(w => singleWidthToColumns(w, repeat)) : singleWidthToColumns(width, repeat);
		const singleCountToColumns = n => n ? typeof n === 'number' ? `repeat(${n}, 1fr)` : n : null;
		const countToColumns = n => Array.isArray(n) ? n.map(singleCountToColumns) : singleCountToColumns(n);
		/**
		@@ -212,27 +107,26 @@ * CSS grid layout component to arrange direct child elements in a tiled grid layout.
		*/
		var Grid = /#__PURE__/React.forwardRef(function Grid(_ref, ref) {
		var width = _ref.width,
		columns = _ref.columns,
		_ref$gap = _ref.gap,
		gap = _ref$gap === void 0 ? 3 : _ref$gap,
		_ref$repeat = _ref.repeat,
		repeat = _ref$repeat === void 0 ? 'fit' : _ref$repeat,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$f);

		var gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		var __css = {
		const Grid = /#__PURE__/React.forwardRef(function Grid({
		width,
		columns,
		gap = 3,
		repeat = 'fit',
		...props
		}, ref) {
		const gridTemplateColumns = !!width ? widthToColumns(width, repeat) : countToColumns(columns);
		const __css = {
		display: 'grid',
		gridGap: gap,
		gridTemplateColumns: gridTemplateColumns
		gridTemplateColumns
		};
		return /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'grids',
		__css: __css
		})));
		return jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'grids',
		__css
		})
		});
		});

		var Box = Box$1;

		const Box = Box$1;
		/**
		@@ -242,24 +136,26 @@ * Primitive button component with variants
		*/
		var Button = /#__PURE__/React.forwardRef(function Button(props, ref) {
		return /#__PURE__/React.createElement(Box, _extends({
		const Button = /#__PURE__/React.forwardRef(function Button(props, ref) {
		return jsx(Box, {
		ref: ref,
		as: "button",
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		appearance: 'none',
		display: props.hidden ? undefined : 'inline-block',
		textAlign: 'center',
		lineHeight: 'inherit',
		textDecoration: 'none',
		fontSize: 'inherit',
		px: 3,
		py: 2,
		color: 'white',
		bg: 'primary',
		border: 0,
		borderRadius: 4
		}
		})
		});
		});
		@@ -272,10 +168,12 @@
		*/
		var Link = /#__PURE__/React.forwardRef(function Link(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Link = /#__PURE__/React.forwardRef(function Link(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "a",
		variant: "styles.a"
		}, props, __internalProps({
		__themeKey: 'links'
		})));
		variant: "styles.a",
		...props,
		...__internalProps({
		__themeKey: 'links'
		})
		});
		});
		@@ -290,15 +188,17 @@
		*/
		var Paragraph = /#__PURE__/React.forwardRef(function Paragraph(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Paragraph = /#__PURE__/React.forwardRef(function Paragraph(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "p",
		variant: "paragraph"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})));
		variant: "paragraph",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'body',
		fontWeight: 'body',
		lineHeight: 'body'
		}
		})
		});
		});
		@@ -312,10 +212,12 @@
		*/
		var Text = /#__PURE__/React.forwardRef(function Text(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Text = /#__PURE__/React.forwardRef(function Text(props, ref) {
		return jsx(Box$1, {
		as: "span",
		ref: ref,
		variant: "default"
		}, props, __internalProps({
		__themeKey: 'text'
		})));
		variant: "default",
		...props,
		...__internalProps({
		__themeKey: 'text'
		})
		});
		});
		@@ -330,15 +232,17 @@
		*/
		var Heading = /#__PURE__/React.forwardRef(function Heading(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Heading = /#__PURE__/React.forwardRef(function Heading(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "h2",
		variant: "heading"
		}, props, __internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})));
		variant: "heading",
		...props,
		...__internalProps({
		__themeKey: 'text',
		__css: {
		fontFamily: 'heading',
		fontWeight: 'heading',
		lineHeight: 'heading'
		}
		})
		});
		});
		@@ -350,14 +254,17 @@
		*/
		var Image = /#__PURE__/React.forwardRef(function Image(props, ref) {
		var __outerCss = props.__css;
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Image = /#__PURE__/React.forwardRef(function Image(props, ref) {
		const __outerCss = props.__css;
		return jsx(Box$1, {
		ref: ref,
		as: "img"
		}, props, __internalProps({
		__themeKey: 'images',
		__css: _extends({
		maxWidth: '100%',
		height: 'auto'
		}, __outerCss)
		})));
		as: "img",
		...props,
		...__internalProps({
		__themeKey: 'images',
		__css: {
		maxWidth: '100%',
		height: 'auto',
		...__outerCss
		}
		})
		});
		});
		@@ -370,9 +277,11 @@
		*/
		var Card = /#__PURE__/React.forwardRef(function Card(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Card = /#__PURE__/React.forwardRef(function Card(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'cards'
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'cards'
		})
		});
		});
		@@ -385,18 +294,19 @@
		*/
		var Label = /#__PURE__/React.forwardRef(function Label(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Label = /#__PURE__/React.forwardRef(function Label(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "label",
		variant: "label"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})));
		variant: "label",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		width: '100%',
		display: 'flex'
		}
		})
		});
		});

		var _excluded$e = ["sx", "autofillBackgroundColor"];
		var autofillStyles = {
		const autofillStyles = {
		boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)',
		@@ -408,3 +318,3 @@ fontSize: 'inherit',
		};
		var defaultInputStyles = {
		const defaultInputStyles = {
		display: 'block',
		@@ -423,3 +333,2 @@ width: '100%',
		};

		/**
		@@ -430,30 +339,28 @@ * Input variants can be defined in `theme.forms`
		*/
		var Input = /#__PURE__/React.forwardRef(function Input(_ref, ref) {
		var sx = _ref.sx,
		_ref$autofillBackgrou = _ref.autofillBackgroundColor,
		autofillBackgroundColor = _ref$autofillBackgrou === void 0 ? 'background' : _ref$autofillBackgrou,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);

		return /#__PURE__/React.createElement(Box$1, _extends({
		const Input = /#__PURE__/React.forwardRef(function Input({
		sx,
		autofillBackgroundColor = 'background',
		...rest
		}, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "input",
		variant: "input",
		sx: _extends({
		'--theme-ui-input-autofill-bg': function themeUiInputAutofillBg(theme) {
		return theme.colors && get(theme.colors, autofillBackgroundColor, null);
		}
		}, sx)
		}, rest, __internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})));
		sx: {
		'--theme-ui-input-autofill-bg': theme => theme.colors && get(theme.colors, autofillBackgroundColor, null),
		...sx
		},
		...rest,
		...__internalProps({
		__themeKey: 'forms',
		__css: defaultInputStyles
		})
		});
		});

		var _excluded$d = ["size"];
		var SVG = /#__PURE__/React.forwardRef(function SVG(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);

		var svgProps = _extends({
		const SVG = /#__PURE__/React.forwardRef(function SVG({
		size = 24,
		...rest
		}, ref) {
		const svgProps = {
		xmlns: 'http://www.w3.org/2000/svg',
		@@ -463,20 +370,19 @@ width: size,
		viewBox: '0 0 24 24',
		fill: 'currentcolor'
		}, rest);

		return /#__PURE__/React.createElement(Box$1, _extends({
		fill: 'currentcolor',
		...rest
		};
		return jsx(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps));
		as: "svg",
		...svgProps
		});
		});
		SVG.displayName = 'SVG';

		var _excluded$c = ["arrow"];

		var DownArrow = function DownArrow(props) {
		return /#__PURE__/React.createElement(SVG, props, /#__PURE__/React.createElement("path", {
		const DownArrow = props => jsx(SVG, {
		...props,
		children: jsx("path", {
		d: "M7 10l5 5 5-5z"
		}));
		};

		})
		});
		/**
		@@ -487,7 +393,7 @@ * Select variants can be defined in `theme.forms`
		*/
		var Select = /#__PURE__/React.forwardRef(function Select(_ref, ref) {
		var arrow = _ref.arrow,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$c);

		var __css = {
		const Select = /#__PURE__/React.forwardRef(function Select({
		arrow,
		...props
		}, ref) {
		const __css = {
		display: 'block',
		@@ -503,24 +409,26 @@ width: '100%',
		color: 'inherit',
		backgroundColor: function backgroundColor(theme) {
		return get(theme, 'colors.background', null);
		}
		backgroundColor: theme => get(theme, 'colors.background', null)
		};
		return /#__PURE__/React.createElement(Box$1, _extends({}, getMargin(props), {
		return jsxs(Box$1, {
		...getMargin(props),
		sx: {
		display: 'flex'
		}
		}), /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref,
		as: "select",
		variant: "select"
		}, omitMargin(props), __internalProps({
		__themeKey: 'forms',
		__css: __css
		}))), arrow \|\| /#__PURE__/React.createElement(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		}));
		},
		children: [jsx(Box$1, {
		ref: ref,
		as: "select",
		variant: "select",
		...omitMargin(props),
		...__internalProps({
		__themeKey: 'forms',
		__css
		})
		}), arrow \|\| jsx(DownArrow, {
		sx: {
		ml: -28,
		alignSelf: 'center',
		pointerEvents: 'none'
		}
		})]
		});
		});
		@@ -535,56 +443,61 @@
		*/
		var Textarea = /#__PURE__/React.forwardRef(function Textarea(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Textarea = /#__PURE__/React.forwardRef(function Textarea(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "textarea",
		variant: "textarea"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: {
		display: 'block',
		width: '100%',
		p: 2,
		appearance: 'none',
		fontSize: 'inherit',
		lineHeight: 'inherit',
		border: '1px solid',
		borderRadius: 4,
		color: 'inherit',
		bg: 'transparent'
		}
		})));
		variant: "textarea",
		...props,
		...__internalProps({
		__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 _excluded$b = ["className", "sx", "variant"];

		var RadioChecked = function RadioChecked(props) {
		return /#__PURE__/React.createElement(SVG, props, /#__PURE__/React.createElement("path", {
		const RadioChecked = props => jsx(SVG, {
		...props,
		children: jsx("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 RadioUnchecked = function RadioUnchecked(props) {
		return /#__PURE__/React.createElement(SVG, props, /#__PURE__/React.createElement("path", {
		})
		});
		const RadioUnchecked = props => jsx(SVG, {
		...props,
		children: jsx("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 RadioIcon(props) {
		return /#__PURE__/React.createElement(React.Fragment, null, /#__PURE__/React.createElement(RadioChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const RadioIcon = props => jsxs(React.Fragment, {
		children: [jsx(RadioChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React.createElement(RadioUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsx(RadioUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -597,81 +510,85 @@ * Form radio input component
		*/
		var Radio = /#__PURE__/React.forwardRef(function Radio(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'radio' : _ref$variant,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$b);

		return /#__PURE__/React.createElement(Box$1, {
		const Radio = /#__PURE__/React.forwardRef(function Radio({
		className,
		sx,
		variant = 'radio',
		...props
		}, ref) {
		return jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React.createElement(Box$1, _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$1, _extends({
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		},
		children: [jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "radio",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))));
		}), jsx(Box$1, {
		as: RadioIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 9999,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		bg: 'highlight'
		}
		}
		})
		})]
		});
		});

		var _excluded$a = ["className", "sx", "variant", "children"];

		var CheckboxChecked = function CheckboxChecked(props) {
		return /#__PURE__/React.createElement(SVG, props, /#__PURE__/React.createElement("path", {
		const CheckboxChecked = props => jsx(SVG, {
		...props,
		children: jsx("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 CheckboxUnchecked = function CheckboxUnchecked(props) {
		return /#__PURE__/React.createElement(SVG, props, /#__PURE__/React.createElement("path", {
		})
		});
		const CheckboxUnchecked = props => jsx(SVG, {
		...props,
		children: jsx("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 CheckboxIcon(props) {
		return /#__PURE__/React.createElement(React.Fragment, null, /#__PURE__/React.createElement(CheckboxChecked, _extends({}, props, __internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		})
		});
		const CheckboxIcon = props => jsxs(React.Fragment, {
		children: [jsx(CheckboxChecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'none',
		'input:checked ~ &': {
		display: 'block'
		}
		}
		}
		}))), /#__PURE__/React.createElement(CheckboxUnchecked, _extends({}, props, __internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		})
		}), jsx(CheckboxUnchecked, {
		...props,
		...__internalProps({
		__css: {
		display: 'block',
		'input:checked ~ &': {
		display: 'none'
		}
		}
		}
		}))));
		};

		})
		})]
		});
		/**
		@@ -684,55 +601,54 @@ * Form checkbox input component
		*/
		var Checkbox = /#__PURE__/React.forwardRef(function Checkbox(_ref, ref) {
		var className = _ref.className,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$a);

		return /#__PURE__/React.createElement(Box$1, {
		const Checkbox = /#__PURE__/React.forwardRef(function Checkbox({
		className,
		sx,
		variant = 'checkbox',
		children,
		...props
		}, ref) {
		return jsxs(Box$1, {
		sx: {
		minWidth: 'min-content'
		}
		}, /#__PURE__/React.createElement(Box$1, _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$1, _extends({
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		},
		children: [jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		...props,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}
		}))), children);
		}), jsx(Box$1, {
		as: CheckboxIcon,
		"aria-hidden": "true",
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css: {
		mr: 2,
		borderRadius: 4,
		color: 'gray',
		flexShrink: 0,
		'input:checked ~ &': {
		color: 'primary'
		},
		'input:focus ~ &': {
		color: 'primary',
		bg: 'highlight'
		}
		}
		})
		}), children]
		});
		});

		var _excluded$9 = ["className", "label", "sx", "variant"];
		var GUTTER = 2;
		var SIZE = 18;

		const GUTTER = 2;
		const SIZE = 18;
		/**
		@@ -744,11 +660,10 @@ * Form switch component
		*/
		var Switch = /#__PURE__/React.forwardRef(function Switch(_ref, ref) {
		var className = _ref.className,
		label = _ref.label,
		sx = _ref.sx,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? 'switch' : _ref$variant,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);

		var __css = {
		const Switch = /#__PURE__/React.forwardRef(function Switch({
		className,
		label,
		sx,
		variant = 'switch',
		...rest
		}, ref) {
		const __css = {
		position: 'relative',
		@@ -775,3 +690,3 @@ flexShrink: 0,
		transform: 'translateX(0%)',
		transition: "transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)"
		transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`
		},
		@@ -785,36 +700,42 @@ 'input:checked ~ &': {
		};
		return /#__PURE__/React.createElement(Label, {
		return jsxs(Label, {
		sx: {
		cursor: 'pointer'
		}
		}, /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label
		}, rest, {
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		}
		}, __internalProps({
		__themeKey: 'forms'
		}))), /#__PURE__/React.createElement(Box$1, _extends({
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx
		}, __internalProps({
		__themeKey: 'forms',
		__css: __css
		})), /#__PURE__/React.createElement(Box$1, null)), /#__PURE__/React.createElement("span", null, label));
		children: [jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "checkbox",
		"aria-label": label,
		...rest,
		sx: {
		position: 'absolute',
		opacity: 0,
		zIndex: -1,
		width: 1,
		height: 1,
		overflow: 'hidden'
		},
		...__internalProps({
		__themeKey: 'forms'
		})
		}), jsx(Box$1, {
		css: {
		padding: GUTTER
		},
		variant: variant,
		className: className,
		sx: sx,
		...__internalProps({
		__themeKey: 'forms',
		__css
		}),
		children: jsx(Box$1, {})
		}), jsx("span", {
		children: label
		})]
		});
		});

		var thumbStyle = {
		const thumbStyle = {
		appearance: 'none',
		@@ -828,3 +749,3 @@ width: 16,
		};
		var sliderStyle = {
		const sliderStyle = {
		display: 'block',
		@@ -847,3 +768,2 @@ width: '100%',
		};

		/**
		@@ -856,34 +776,40 @@ * Range input element
		*/
		var Slider = /#__PURE__/React.forwardRef(function Slider(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Slider = /#__PURE__/React.forwardRef(function Slider(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "input",
		type: "range",
		variant: "slider"
		}, props, __internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})));
		variant: "slider",
		...props,
		...__internalProps({
		__themeKey: 'forms',
		__css: sliderStyle
		})
		});
		});

		var _excluded$8 = ["as", "label", "id", "name"];
		var Field = /#__PURE__/React.forwardRef(function Field(_ref, ref) {
		var _ref$as = _ref.as,
		Control = _ref$as === void 0 ? Input : _ref$as,
		label = _ref.label,
		id = _ref.id,
		name = _ref.name,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);

		var fieldIdentifier = id \|\| name;

		var controlProps = _extends({
		ref: ref,
		name: name,
		id: fieldIdentifier
		}, omitMargin(rest));

		return /#__PURE__/React.createElement(Box$1, getMargin(rest), /#__PURE__/React.createElement(Label, {
		htmlFor: fieldIdentifier
		}, label), /#__PURE__/React.createElement(Control, controlProps));
		const Field = /#__PURE__/React.forwardRef(function Field({
		// if somebody specifies the generic parameter without passing `as` prop, they get Input anyway
		as: Control = Input,
		label,
		id,
		name,
		...rest
		}, ref) {
		const fieldIdentifier = id \|\| name;
		const controlProps = {
		ref,
		name,
		id: fieldIdentifier,
		...omitMargin(rest)
		};
		return jsxs(Box$1, {
		...getMargin(rest),
		children: [jsx(Label, {
		htmlFor: fieldIdentifier,
		children: label
		}), jsx(Control, {
		...controlProps
		})]
		});
		}); // Field is generic bcs of `as` prop, so we can't just use types from forwardRef
		@@ -895,4 +821,4 @@
		*/
		var Progress = /#__PURE__/React.forwardRef(function Progress(props, ref) {
		var __css = {
		const Progress = /#__PURE__/React.forwardRef(function Progress(props, ref) {
		const __css = {
		display: 'block',
		@@ -919,13 +845,13 @@ width: '100%',
		};
		return /#__PURE__/React.createElement(Box$1, _extends({
		return jsx(Box$1, {
		ref: ref,
		as: "progress",
		variant: "styles.progress"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "styles.progress",
		...props,
		...__internalProps({
		__css
		})
		});
		});

		var _excluded$7 = ["size", "strokeWidth", "value", "min", "max", "title"];

		/**
		@@ -935,21 +861,16 @@ * Single value SVG donut chart
		*/
		var Donut = /#__PURE__/React.forwardRef(function Donut(_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, _excluded$7);

		var r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		var C = 2 * r * Math.PI;
		var offset = C - (value - min) / (max - min) * C;
		var svgProps = {
		strokeWidth: strokeWidth,
		const Donut = /#__PURE__/React.forwardRef(function Donut({
		size = 128,
		strokeWidth = 2,
		value = 0,
		min = 0,
		max = 1,
		title,
		...props
		}, ref) {
		const r = 16 - (typeof strokeWidth === 'number' ? strokeWidth : parseFloat(strokeWidth));
		const C = 2 * r * Math.PI;
		const offset = C - (value - min) / (max - min) * C;
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -961,3 +882,3 @@ width: size,
		};
		return /#__PURE__/React.createElement(Box$1, _extends({
		return jsxs(Box$1, {
		ref: ref,
		@@ -968,41 +889,42 @@ as: "svg",
		"aria-valuemin": min,
		"aria-valuemax": max
		}, svgProps, props, __internalProps({
		__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)"
		}));
		"aria-valuemax": max,
		...svgProps,
		...props,
		...__internalProps({
		__css: {
		color: 'primary'
		}
		}),
		children: [title && jsx("title", {
		children: title
		}), jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		opacity: 1 / 8
		}), jsx("circle", {
		cx: 16,
		cy: 16,
		r: r,
		strokeDasharray: C,
		strokeDashoffset: offset,
		transform: "rotate(-90 16 16)"
		})]
		});
		});

		var _excluded$6 = ["size", "strokeWidth", "max", "title", "duration"];
		var Spinner = /#__PURE__/React.forwardRef(function Spinner(_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.max;
		var _ref$title = _ref.title,
		title = _ref$title === void 0 ? 'Loading' : _ref$title,
		_ref$duration = _ref.duration,
		duration = _ref$duration === void 0 ? 750 : _ref$duration,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$6);

		var __css = {
		const Spinner = /#__PURE__/React.forwardRef(function Spinner({
		size = 48,
		strokeWidth = 4,
		max = 1,
		title = 'Loading',
		duration = 750,
		...props
		}, ref) {
		const __css = {
		color: 'primary',
		overflow: 'visible'
		};
		var svgProps = {
		strokeWidth: strokeWidth,
		const svgProps = {
		strokeWidth,
		viewBox: '0 0 32 32',
		@@ -1015,4 +937,4 @@ width: size,
		};
		var circleProps = {
		strokeWidth: strokeWidth,
		const circleProps = {
		strokeWidth,
		r: 16 - strokeWidth,
		@@ -1023,62 +945,71 @@ cx: 16,
		};
		return /#__PURE__/React.createElement(Box$1, _extends({
		return jsxs(Box$1, {
		ref: ref,
		as: "svg"
		}, svgProps, props, __internalProps({
		__css: __css
		})), /#__PURE__/React.createElement("title", null, title), /#__PURE__/React.createElement("circle", _extends({}, circleProps, {
		opacity: 1 / 8
		})), /#__PURE__/React.createElement("circle", _extends({}, circleProps, {
		strokeDasharray: "20 110"
		}), /#__PURE__/React.createElement("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: duration + "ms",
		repeatCount: "indefinite"
		})));
		as: "svg",
		...svgProps,
		...props,
		...__internalProps({
		__css
		}),
		children: [jsx("title", {
		children: title
		}), jsx("circle", {
		...circleProps,
		opacity: 1 / 8
		}), jsx("circle", {
		...circleProps,
		strokeDasharray: "20 110",
		children: jsx("animateTransform", {
		attributeName: "transform",
		attributeType: "XML",
		type: "rotate",
		from: "0 16 16",
		to: "360 16 16",
		dur: `${duration}ms`,
		repeatCount: "indefinite"
		})
		})]
		});
		});

		var _excluded$5 = ["size"];
		var Avatar = /#__PURE__/React.forwardRef(function Avatar(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 48 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$5);

		return /#__PURE__/React.createElement(Image, _extends({
		const Avatar = /#__PURE__/React.forwardRef(function Avatar({
		size = 48,
		...props
		}, ref) {
		return jsx(Image, {
		ref: ref,
		width: size,
		height: size,
		variant: "avatar"
		}, props, __internalProps({
		__css: {
		borderRadius: 9999
		}
		})));
		variant: "avatar",
		...props,
		...__internalProps({
		__css: {
		borderRadius: 9999
		}
		})
		});
		});

		var Badge = /#__PURE__/React.forwardRef(function Badge(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Badge = /#__PURE__/React.forwardRef(function Badge(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'badges',
		__css: {
		display: 'inline-block',
		verticalAlign: 'baseline',
		fontSize: 0,
		fontWeight: 'bold',
		whiteSpace: 'nowrap',
		px: 1,
		borderRadius: 2,
		color: 'white',
		bg: 'primary'
		}
		})
		});
		});

		var _excluded$4 = ["size"];

		/**
		@@ -1092,35 +1023,34 @@ * Transparent button for SVG icons
		*/
		var IconButton = /#__PURE__/React.forwardRef(function IconButton(_ref, ref) {
		const IconButton = /#__PURE__/React.forwardRef(function IconButton({
		size = 32,
		...props
		}, ref) {
		var _css;

		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$4);

		var emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return /#__PURE__/React.createElement(Box$1, _extends({
		const emotionCssLabel = ((_css = props.__css) == null ? void 0 : _css.label) \|\| 'IconButton';
		return jsx(Box$1, {
		ref: ref,
		as: "button",
		variant: "icon"
		}, props, __internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})));
		variant: "icon",
		...props,
		...__internalProps({
		__themeKey: 'buttons',
		__css: {
		label: emotionCssLabel,
		appearance: 'none',
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		padding: 1,
		width: size,
		height: size,
		color: 'inherit',
		bg: 'transparent',
		border: 'none',
		borderRadius: 4
		}
		})
		});
		});

		var _excluded$3 = ["size"];
		var CloseIcon = /#__PURE__/React.createElement("svg", {
		const CloseIcon = jsx("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		@@ -1130,7 +1060,7 @@ width: "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"
		}));

		viewBox: "0 0 24 24",
		children: jsx("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"
		})
		});
		/**
		@@ -1145,8 +1075,7 @@ * Button with close (×) icon.
		*/
		var Close = /#__PURE__/React.forwardRef(function Close(_ref, ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 32 : _ref$size,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$3);

		return /#__PURE__/React.createElement(IconButton, _extends({
		const Close = /#__PURE__/React.forwardRef(function Close({
		size = 32,
		...props
		}, ref) {
		return jsx(IconButton, {
		ref: ref,
		@@ -1156,6 +1085,6 @@ size: size,
		"aria-label": "Close",
		variant: "close"
		}, props, {
		variant: "close",
		...props,
		children: CloseIcon
		}));
		});
		});
		@@ -1169,19 +1098,21 @@
		*/
		var Alert = /#__PURE__/React.forwardRef(function Alert(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Alert = /#__PURE__/React.forwardRef(function Alert(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		variant: "primary"
		}, props, __internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})));
		variant: "primary",
		...props,
		...__internalProps({
		__themeKey: 'alerts',
		__css: {
		display: 'flex',
		alignItems: 'center',
		px: 3,
		py: 2,
		fontWeight: 'bold',
		color: 'white',
		bg: 'primary',
		borderRadius: 4
		}
		})
		});
		});
		@@ -1192,24 +1123,22 @@
		*/
		var Divider = /#__PURE__/React.forwardRef(function Divider(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Divider = /#__PURE__/React.forwardRef(function Divider(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		as: "hr",
		variant: "styles.hr"
		}, props, __internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})));
		variant: "styles.hr",
		...props,
		...__internalProps({
		__css: {
		color: 'gray',
		m: 0,
		my: 2,
		border: 0,
		borderBottom: '1px solid'
		}
		})
		});
		});

		var _excluded$2 = ["variant", "sx", "ratio", "src", "frameBorder", "allowFullScreen", "width", "height", "allow"];
		var getContainerProps = getProps(__isBoxStyledSystemProp);
		var getIframeProps = getProps(function (str) {
		return !__isBoxStyledSystemProp(str);
		});

		const getContainerProps = getProps(__isBoxStyledSystemProp);
		const getIframeProps = getProps(str => !__isBoxStyledSystemProp(str));
		/**
		@@ -1222,57 +1151,55 @@ * Responsive iframe for video embeds.
		*/
		var Embed = /#__PURE__/React.forwardRef(function Embed(_ref, ref) {
		var variant = _ref.variant,
		sx = _ref.sx,
		_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,
		rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);

		var iframeProps = _extends({
		src: src,
		width: width,
		height: height,
		frameBorder: frameBorder,
		allowFullScreen: allowFullScreen,
		allow: allow
		}, getIframeProps(rest));

		return /#__PURE__/React.createElement(Box$1, _extends({
		const Embed = /#__PURE__/React.forwardRef(function Embed({
		variant,
		sx,
		ratio = 16 / 9,
		src,
		frameBorder = 0,
		allowFullScreen = true,
		width = 560,
		height = 315,
		allow,
		...rest
		}, ref) {
		const iframeProps = {
		src,
		width,
		height,
		frameBorder,
		allowFullScreen,
		allow,
		...getIframeProps(rest)
		};
		return jsx(Box$1, {
		variant: variant,
		sx: sx
		}, getContainerProps(rest), __internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		})), /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref,
		as: "iframe"
		}, iframeProps, __internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		}))));
		sx: sx,
		...getContainerProps(rest),
		...__internalProps({
		__css: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%',
		position: 'relative',
		overflow: 'hidden'
		}
		}),
		children: jsx(Box$1, {
		ref: ref,
		as: "iframe",
		...iframeProps,
		...__internalProps({
		__css: {
		position: 'absolute',
		width: '100%',
		height: '100%',
		top: 0,
		bottom: 0,
		left: 0,
		border: 0
		}
		})
		})
		});
		});

		var _excluded$1 = ["ratio", "children"];

		/**
		@@ -1282,9 +1209,8 @@ * Component for maintaining a fluid-width aspect ratio
		*/
		var AspectRatio = /#__PURE__/React.forwardRef(function AspectRatio(_ref, ref) {
		var _ref$ratio = _ref.ratio,
		ratio = _ref$ratio === void 0 ? 4 / 3 : _ref$ratio,
		children = _ref.children,
		props = _objectWithoutPropertiesLoose(_ref, _excluded$1);

		return /#__PURE__/React.createElement(Box$1, {
		const AspectRatio = /#__PURE__/React.forwardRef(function AspectRatio({
		ratio = 4 / 3,
		children,
		...props
		}, ref) {
		return jsxs(Box$1, {
		ref: ref,
		@@ -1294,22 +1220,25 @@ sx: {
		overflow: 'hidden'
		}
		}, /#__PURE__/React.createElement(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), /#__PURE__/React.createElement(Box$1, _extends({}, props, __internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		})), children));
		},
		children: [jsx(Box$1, {
		sx: {
		width: '100%',
		height: 0,
		paddingBottom: 100 / ratio + '%'
		}
		}), jsx(Box$1, {
		...props,
		...__internalProps({
		__css: {
		position: 'absolute',
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
		}
		}),
		children: children
		})]
		});
		});

		var _excluded = ["ratio"];

		/**
		@@ -1319,15 +1248,18 @@ * Image component constrained by as aspect ratio.
		*/
		var AspectImage = /#__PURE__/React.forwardRef(function AspectImage(_ref, ref) {
		var ratio = _ref.ratio,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);

		return /#__PURE__/React.createElement(AspectRatio, {
		ratio: ratio
		}, /#__PURE__/React.createElement(Image, _extends({
		ref: ref
		}, props, __internalProps({
		__css: {
		objectFit: 'cover'
		}
		}))));
		const AspectImage = /#__PURE__/React.forwardRef(function AspectImage({
		ratio,
		...props
		}, ref) {
		return jsx(AspectRatio, {
		ratio: ratio,
		children: jsx(Image, {
		ref: ref,
		...props,
		...__internalProps({
		__css: {
		objectFit: 'cover'
		}
		})
		})
		});
		});
		@@ -1342,14 +1274,16 @@
		*/
		var Container = /#__PURE__/React.forwardRef(function Container(props, ref) {
		return /#__PURE__/React.createElement(Box$1, _extends({
		const Container = /#__PURE__/React.forwardRef(function Container(props, ref) {
		return jsx(Box$1, {
		ref: ref,
		variant: "container"
		}, props, __internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})));
		variant: "container",
		...props,
		...__internalProps({
		__themeKey: 'layout',
		__css: {
		width: '100%',
		maxWidth: 'container',
		mx: 'auto'
		}
		})
		});
		});
		@@ -1364,4 +1298,4 @@
		*/
		var NavLink = /#__PURE__/React.forwardRef(function NavLink(props, ref) {
		var __css = {
		const NavLink = /#__PURE__/React.forwardRef(function NavLink(props, ref) {
		const __css = {
		color: 'inherit',
		@@ -1375,8 +1309,10 @@ textDecoration: 'none',
		};
		return /#__PURE__/React.createElement(Link, _extends({
		return jsx(Link, {
		ref: ref,
		variant: "nav"
		}, props, __internalProps({
		__css: __css
		})));
		variant: "nav",
		...props,
		...__internalProps({
		__css
		})
		});
		});
		@@ -1390,11 +1326,7 @@
		*/
		var Message = /#__PURE__/React.forwardRef(function Message(props, ref) {
		var __css = {
		const Message = /#__PURE__/React.forwardRef(function Message(props, ref) {
		const __css = {
		padding: 3,
		paddingLeft: function paddingLeft(t) {
		return t.space && Number(t.space[3]) - Number(t.space[1]);
		},
		borderLeftWidth: function borderLeftWidth(t) {
		return t.space && Number(t.space[1]);
		},
		paddingLeft: t => t.space && Number(t.space[3]) - Number(t.space[1]),
		borderLeftWidth: t => t.space && Number(t.space[1]),
		borderLeftStyle: 'solid',
		@@ -1405,13 +1337,15 @@ borderLeftColor: 'primary',
		};
		return /#__PURE__/React.createElement(Box$1, _extends({
		ref: ref
		}, props, __internalProps({
		__themeKey: 'messages',
		__css: __css
		})));
		return jsx(Box$1, {
		ref: ref,
		...props,
		...__internalProps({
		__themeKey: 'messages',
		__css
		})
		});
		});

		var MenuIcon = function MenuIcon(_ref) {
		var _ref$size = _ref.size,
		size = _ref$size === void 0 ? 24 : _ref$size;
		const MenuIcon = ({
		size = 24
		}) => {
		return jsx("svg", {
		@@ -1428,8 +1362,8 @@ xmlns: "http://www.w3.org/2000/svg",
		minWidth: 0
		}
		}, jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		}));
		},
		children: jsx("path", {
		d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
		})
		});
		};

		/**
		@@ -1441,11 +1375,13 @@ * MenuButton variants can be defined in the `theme.buttons` object.
		*/
		var MenuButton = /#__PURE__/React.forwardRef(function MenuButton(props, ref) {
		return jsx(IconButton, _extends({
		const MenuButton = /#__PURE__/React.forwardRef(function MenuButton(props, ref) {
		return jsx(IconButton, {
		ref: ref,
		title: "Menu",
		"aria-label": "Toggle Menu",
		variant: "menu"
		}, props), jsx(MenuIcon, null));
		variant: "menu",
		...props,
		children: jsx(MenuIcon, {})
		});
		});

		export { Alert, AspectImage, AspectRatio, Avatar, Badge, Box$1 as Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Field, Flex, Grid, Heading, IconButton, Image, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, __isBoxStyledSystemProp };

package.json

		{
		"name": "@theme-ui/components",
		"version": "0.15.7",
		"version": "0.16.0-develop.4",
		"main": "dist/theme-ui-components.cjs.js",
		@@ -12,16 +12,16 @@ "module": "dist/theme-ui-components.esm.js",
		"@styled-system/space": "^5.1.2",
		"@theme-ui/css": "^0.15.7",
		"@types/styled-system": "^5.1.13"
		"@types/styled-system": "^5.1.13",
		"@theme-ui/css": "^0.16.0-develop.4",
		"@theme-ui/core": "^0.16.0-develop.4"
		},
		"peerDependencies": {
		"@emotion/react": "^11",
		"react": ">=18"
		"@emotion/react": "^11.11.1",
		"react": ">=18",
		"@theme-ui/theme-provider": "^0.16.0-develop.4"
		},
		"devDependencies": {
		"@emotion/react": "^11.11.1",
		"@types/react": "^18.2.12",
		"react": "^18.1.0",
		"@types/react": "^18",
		"@babel/core": "^7",
		"theme-ui": "^0.15.7",
		"@theme-ui/test-utils": "^0.15.7",
		"@theme-ui/core": "^0.15.7"
		"@theme-ui/test-utils": "^0.16.0-develop.4"
		},
		@@ -28,0 +28,0 @@ "publishConfig": {

src/types.ts

		@@ -1,3 +0,1 @@
		import * as React from 'react'

		export type Assign<T, U> = {
		@@ -11,4 +9,5 @@ [P in keyof (T & U)]: P extends keyof T

		export type ForwardRef<T, P> = React.ForwardRefExoticComponent<
		React.PropsWithoutRef<P> & React.RefAttributes<T>
		>
		export interface ForwardRef<T, P>
		extends React.ForwardRefExoticComponent<
		React.PropsWithoutRef<P> & React.RefAttributes<T>
		> {}

src/Box.tsx