@planningcenter/tapestry-react 1.4.0 → 2.0.0-rc.0

package/dist/esm/Highlight/Highlight.js

@@ -2,23 +2,27 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Text from '../Text';
+import { useThemeProps } from '../system';
 import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './utils';
 
 /**
  * Highlight or mark letters in a string using a provided query.
  */
 function Highlight(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$marker = _ref.marker,
+  var _ref$marker = _ref.marker,
       marker = _ref$marker === void 0 ? markStartsWithMatchSubstring : _ref$marker,
       query = _ref.query,
       text = _ref.text,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["color", "marker", "query", "text"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["marker", "query", "text"]);
+
+  var _useThemeProps = useThemeProps('highlight', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color"]);
 
   return /*#__PURE__*/React.createElement(Text, _extends({
     as: "span"
-  }, restProps), marker(text, query).map(function (part, index) {
+  }, themeProps), marker(text, query).map(function (part, index) {
     return /*#__PURE__*/React.createElement(Text, {
       key: index,
       inline: true,

package/dist/esm/Icon/Status.js

@@ -4,9 +4,9 @@ import React from 'react';
 import Icon from './Icon';
 import Path from './Path';
 var STATUS_VARIANTS = {
-  confirmed: ['checkmark-circle', 'success'],
-  unconfirmed: ['question-circle', 'warning'],
-  declined: ['close-circle', 'error']
+  confirmed: ['general.outlinedCircleCheck', 'success'],
+  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
+  declined: ['general.outlinedXCircle', 'error']
 };
 
 function Status(props) {
@@ -31,7 +31,7 @@ function Status(props) {
     name: variantName,
     color: color || variantColor
   }, restProps), /*#__PURE__*/React.createElement(Path, {
-    name: "radio-0",
+    name: "tapestry.radio0",
     color: color
   }));
 }

package/dist/esm/Input/InputBox.js

@@ -313,7 +313,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       size: size
     }) : onClear ? /*#__PURE__*/React.createElement(Button, {
       icon: {
-        name: 'close'
+        name: 'general.x'
       },
       title: "clear input value",
       size: size,

package/dist/esm/List/ListItem.js

@@ -24,7 +24,7 @@ function ListItem(_ref) {
     backgroundColor: "surface"
   }, hoverProps, restProps), children, onRemoveRequest && /*#__PURE__*/React.createElement(Button, {
     icon: {
-      name: 'remove-circle-filled'
+      name: 'general.minusCircle'
     },
     title: removeTitle,
     size: "sm",

package/dist/esm/Menu/Heading.js

@@ -14,4 +14,5 @@ function Heading(_ref) {
   }, restProps), children);
 }
 
+Heading.displayName = 'Menu.Heading';
 export default Heading;

package/dist/esm/Pagination/Pagination.js

@@ -95,7 +95,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage - 1),
       disabled: currentPage === 1,
       icon: {
-        name: 'caret-left'
+        name: 'general.leftChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Previous Page'
@@ -106,7 +107,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage + 1),
       disabled: currentPage === totalPages,
       icon: {
-        name: 'caret-right'
+        name: 'general.rightChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Next Page'

package/dist/esm/Progress/Progress.js

@@ -2,12 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Box from '../Box';
+import { useThemeProps } from '../system';
 
-function Progress(props) {
-  var value = props.value,
-      _props$activeColor = props.activeColor,
-      activeColor = _props$activeColor === void 0 ? 'primary' : _props$activeColor,
-      restProps = _objectWithoutPropertiesLoose(props, ["value", "activeColor"]);
+function Progress(_ref) {
+  var value = _ref.value,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["value"]);
+
+  var _useThemeProps = useThemeProps('progress', restProps),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? 'primary' : _useThemeProps$active,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeColor"]);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     role: "progressbar",
@@ -18,7 +22,7 @@ function Progress(props) {
     position: "relative",
     overflow: "hidden",
     backgroundColor: "grey-3"
-  }, restProps), /*#__PURE__*/React.createElement(Box, {
+  }, themeProps), /*#__PURE__*/React.createElement(Box, {
     position: "absolute",
     top: 0,
     right: 0,

package/dist/esm/Radio/Radio.js

@@ -9,8 +9,8 @@ import Text from '../Text';
 import VariantProvider from '../VariantProvider';
 import { useThemeValue } from '../system';
 var iconPaths = {
-  fill: 'radio-0',
-  checked: 'radio-1'
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1'
 };
 var radioEmitter = mitt();
 

package/dist/esm/RangeSlider/RangeSlider.js

@@ -4,6 +4,7 @@ import React, { useRef, useState } from 'react';
 import { clamp, snap } from '@popmotion/popcorn';
 import Box from '../Box';
 import { useMeasure } from '../hooks';
+import { useThemeProps } from '../system';
 
 function RangeSlider(props) {
   var _props$min = props.min,
@@ -15,9 +16,12 @@ function RangeSlider(props) {
       disabled = props.disabled,
       value = props.value,
       onChange = props.onChange,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? {} : _props$variant,
-      restProps = _objectWithoutPropertiesLoose(props, ["min", "max", "step", "disabled", "value", "onChange", "variant"]);
+      restProps = _objectWithoutPropertiesLoose(props, ["min", "max", "step", "disabled", "value", "onChange"]);
+
+  var _useThemeProps = useThemeProps('rangeSlider', restProps),
+      _useThemeProps$varian = _useThemeProps.variant,
+      variant = _useThemeProps$varian === void 0 ? {} : _useThemeProps$varian,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["variant"]);
 
   var snapTo = snap(step);
   var sliderRef = useRef();
@@ -165,7 +169,7 @@ function RangeSlider(props) {
     opacity: disabled ? 0.65 : undefined,
     onMouseDown: disabled ? undefined : handleTrackPointerDown,
     onTouchStart: disabled ? undefined : handleTrackPointerDown
-  }, restProps), /*#__PURE__*/React.createElement(Box, _extends({
+  }, themeProps), /*#__PURE__*/React.createElement(Box, _extends({
     innerRef: trackRef,
     height: 0.5,
     radius: 6,

package/dist/esm/Scrim/Scrim.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import StackView from '../StackView';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Scrim = /*#__PURE__*/React.forwardRef(function (props) {
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
@@ -9,7 +9,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: ref,
+    innerRef: props.ref,
     position: "fixed",
     top: 0,
     right: 0,

package/dist/esm/Section/Section.js

@@ -4,25 +4,31 @@ import React from 'react';
 import Heading from '../Heading';
 import Toolbar from '../Toolbar';
 import StackView from '../StackView';
+import { useThemeProps } from '../system';
 
 function Section(_ref) {
   var _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       children = _ref.children,
       count = _ref.count,
-      countColor = _ref.countColor,
       helpContent = _ref.helpContent,
       onStatusClearRequest = _ref.onStatusClearRequest,
       status = _ref.status,
       title = _ref.title,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["actions", "children", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["actions", "children", "count", "helpContent", "onStatusClearRequest", "status", "title"]);
+
+  var _useThemeProps = useThemeProps('section', restProps),
+      countColor = _useThemeProps.countColor,
+      headingProps = _useThemeProps.headingProps,
+      toolbarProps = _useThemeProps.toolbarProps,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["countColor", "headingProps", "toolbarProps"]);
 
   return /*#__PURE__*/React.createElement(StackView, _extends({
     as: "section"
-  }, restProps), /*#__PURE__*/React.createElement(Toolbar, {
-    title: /*#__PURE__*/React.createElement(Heading, {
+  }, themeProps), /*#__PURE__*/React.createElement(Toolbar, _extends({
+    title: /*#__PURE__*/React.createElement(Heading, _extends({
       level: 3
-    }, title),
+    }, headingProps), title),
     helpContent: helpContent,
     actions: actions,
     count: count,
@@ -30,7 +36,7 @@ function Section(_ref) {
     status: status,
     onStatusClearRequest: onStatusClearRequest,
     marginBottom: 2
-  }), children);
+  }, toolbarProps)), children);
 }
 
 export default Section;

package/dist/esm/Select/Option.js

@@ -16,7 +16,7 @@ var noop = function noop() {
 };
 
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
-  name: "checkmark",
+  name: "general.check",
   size: "sm"
 });
 

package/dist/esm/Select/Select.js

@@ -505,7 +505,7 @@ var Select = /*#__PURE__*/function (_Component) {
                 touchAction: "manipulation",
                 focusChildrenOnFocus: false,
                 renderRight: /*#__PURE__*/React.createElement(Icon, {
-                  name: isPopoverVisible ? 'arrow-up' : 'arrow-down'
+                  name: isPopoverVisible ? 'general.upCaret' : 'general.downCaret'
                 })
               }, restProps), _this2.getValue(), _this2.getHiddenInputValues()));
             });

package/dist/esm/Sortable/SortableItem.js

@@ -9,7 +9,7 @@ import { SORTABLE_TYPE } from './constants';
 export var SORTABLE_ITEM_DISPLAY_NAME = 'SortableItem';
 
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
-  name: "drag-handle",
+  name: "general.dragHandle",
   size: "sm",
   color: "foregroundTertiary"
 });

package/dist/esm/StackView/StackView.js

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { jsx } from '@emotion/core';
 import * as React from 'react';
 import splitStyles from '../system/split-styles';
+import { spacingValue } from '../system';
 import { joinChildren } from '../utils';
 import { useVariant } from '../VariantProvider';
 var BASELINE = 'baseline';
@@ -50,10 +51,8 @@ var stackViewPlugin = {
       styles.justifyContent = distribution;
     }
 
-    if (typeof spacing === 'number') {
-      var _styles$NotLa;
-
-      styles['& > *:not(:last-child)'] = (_styles$NotLa = {}, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Right' : 'Bottom')] = spacing * 8, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Bottom' : 'Right')] = 0, _styles$NotLa);
+    if (typeof spacing === 'number' || typeof spacing === 'string') {
+      styles.gap = spacingValue(spacing);
     }
 
     return styles;
@@ -69,7 +68,7 @@ export function StackView(_ref2) {
 
   var Element = as || defaultElement;
   var variant = useVariant();
-  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'number' || props.spacing === undefined ? children : joinChildren(children, props.spacing);
+  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'object' ? joinChildren(children, props.spacing) : children;
   return jsx(Element, _extends({
     ref: innerRef
   }, splitStyles(_objectSpread({

package/dist/esm/StepperField/StepperField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Button from '../Button';
-import { useBoxSize } from '../system';
+import { useBoxSize, useThemeProps } from '../system';
 import NumberField from '../NumberField';
 import StackView from '../StackView';
 
@@ -12,12 +12,15 @@ function StepperField(_ref) {
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? Infinity : _ref$max,
       onChange = _ref.onChange,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
       value = _ref.value,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["min", "max", "onChange", "size", "step", "value"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["min", "max", "onChange", "step", "value"]);
+
+  var _useThemeProps = useThemeProps('stepperField', restProps),
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["size"]);
 
   var _useBoxSize = useBoxSize(size),
       fontSize = _useBoxSize.fontSize,
@@ -27,11 +30,11 @@ function StepperField(_ref) {
   return /*#__PURE__*/React.createElement(StackView, _extends({
     axis: "horizontal",
     fontSize: fontSize
-  }, restProps), /*#__PURE__*/React.createElement(Button, {
+  }, themeProps), /*#__PURE__*/React.createElement(Button, {
     size: size,
     title: "Decrement by " + step,
     icon: {
-      name: 'remove',
+      name: 'general.minus',
       size: navigateSize(size, -1)
     },
     disabled: value <= min,
@@ -51,7 +54,7 @@ function StepperField(_ref) {
     size: size,
     title: "Increment by " + step,
     icon: {
-      name: 'add',
+      name: 'general.plus',
       size: navigateSize(size, -1)
     },
     disabled: value >= max,

package/dist/esm/StepperProgress/StepperProgress.js

@@ -3,20 +3,23 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { Children } from 'react';
 import GridView from '../GridView';
 import StepperProgressContext from './Context';
-var ACTIVE_COLOR = 'primary-light';
+import { useThemeProps } from '../system';
 
 function StepperProgress(_ref) {
   var activeStepIndex = _ref.activeStepIndex,
-      _ref$activeColor = _ref.activeColor,
-      activeColor = _ref$activeColor === void 0 ? ACTIVE_COLOR : _ref$activeColor,
       children = _ref.children,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["activeStepIndex", "activeColor", "children"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["activeStepIndex", "children"]);
+
+  var _useThemeProps = useThemeProps('stepperProgress', restProps),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? 'primary-light' : _useThemeProps$active,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeColor"]);
 
   return /*#__PURE__*/React.createElement(GridView, _extends({
     autoFlow: "column",
     autoColumns: "1fr",
     alignment: "center"
-  }, restProps), Children.map(children, function (child, stepIndex) {
+  }, themeProps), Children.map(children, function (child, stepIndex) {
     return /*#__PURE__*/React.createElement(StepperProgressContext.Provider, {
       key: stepIndex,
       value: {

package/dist/esm/Table/ColumnPicker.js

@@ -21,7 +21,7 @@ function ColumnPicker(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     variant: "outline",
     icon: {
-      name: 'columns'
+      name: 'general.threeVerticalBars'
     },
     tooltip: {
       title: 'Filter Columns'

package/dist/esm/Table/DragHandle.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Icon from '../Icon';
 
 var _ref = /*#__PURE__*/React.createElement(Icon, {
-  name: "drag-handle",
+  name: "general.dragHandle",
   size: "sm",
   color: "foregroundTertiary",
   cursor: "grab"

package/dist/esm/Table/NavigationArrow.js

@@ -40,7 +40,7 @@ function NavigationArrow(_ref) {
 
   var buttonProps = _objectSpread((_objectSpread2 = {
     icon: {
-      name: "caret-" + side
+      name: "general." + side + "Chevron"
     },
     title: "navigate " + side,
     theme: false,

package/dist/esm/Table/SubRowToggleCell.js

@@ -27,7 +27,7 @@ var SubRowToggleCell = function SubRowToggleCell(_ref) {
     theme: false,
     title: "Toggle row",
     icon: {
-      name: 'arrow-down'
+      name: 'general.downCaret'
     },
     transform: !toggled && 'rotate(-90deg)'
   }, restProps)));

package/dist/esm/Table/Table.js

@@ -76,7 +76,7 @@ var Table = /*#__PURE__*/function (_PureComponent) {
   };
 
   Table.getIconDirection = function getIconDirection(direction) {
-    return direction === Table.ASC ? 'arrow-up' : 'arrow-down';
+    return direction === Table.ASC ? 'general.upCaret' : 'general.downCaret';
   };
 
   function Table(props) {

package/dist/esm/Tabs/Tab.js

@@ -44,4 +44,5 @@ function Tab(props) {
   }, hoverProps, restProps), children);
 }
 
+Tab.displayName = 'Tabs.Tab';
 export default Tab;

package/dist/esm/TileView/TileView.js

@@ -28,7 +28,7 @@ var tileViewPlugin = {
     }
 
     if (spacing !== undefined) {
-      styles.gridGap = spacingValue(spacing);
+      styles.gap = spacingValue(spacing);
     }
 
     return styles;

package/dist/esm/TokenInput/DefaultToken.js

@@ -18,7 +18,7 @@ function DefaultToken(_ref) {
   return /*#__PURE__*/React.createElement(Badge, _extends({
     size: "sm",
     renderRight: /*#__PURE__*/React.createElement(Icon, {
-      name: "close",
+      name: "general.x",
       size: "xs",
       cursor: "pointer",
       onClick: function onClick() {

package/dist/esm/Wizard/Wizard.js

@@ -179,7 +179,8 @@ var Wizard = /*#__PURE__*/function (_Component) {
     }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/React.createElement(Button, _extends({
       disabled: sendingPayload,
       iconLeft: {
-        name: 'caret-left'
+        name: 'general.leftChevron',
+        size: 'sm'
       },
       onClick: function onClick() {
         return _this2.setState({

package/dist/esm/WrapView/WrapView.js

@@ -2,44 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import StackView from '../StackView';
-var supportsFlexGap = null;
-
-function getSupportsFlexGap() {
-  if (typeof document !== 'undefined' && supportsFlexGap === null) {
-    var div = document.createElement('div');
-    div.style.display = 'flex';
-    div.style.flexDirection = 'column';
-    div.style.gap = '1px';
-    div.appendChild(document.createElement('div'));
-    div.appendChild(document.createElement('div'));
-    document.body.appendChild(div);
-    supportsFlexGap = div.scrollHeight === 1;
-    document.body.removeChild(div);
-  }
-
-  return supportsFlexGap;
-}
-
+import { spacingValue } from '../system';
 export function WrapView(_ref) {
   var children = _ref.children,
       spacing = _ref.spacing,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "spacing"]);
 
-  var supportsFlexGap = getSupportsFlexGap();
   var styles = {
     basis: '100%'
   };
 
   if (spacing) {
-    if (supportsFlexGap) {
-      styles.gap = spacing;
-    } else {
-      styles.marginBottom = -spacing;
-      styles['& > *'] = {
-        marginRight: spacing,
-        marginBottom: spacing
-      };
-    }
+    styles.gap = spacingValue(spacing);
   }
 
   return /*#__PURE__*/React.createElement(StackView, _extends({

package/dist/esm/hooks/use-accessibility-violation.js

@@ -11,7 +11,7 @@ var _ref = /*#__PURE__*/React.createElement(StackView, {
   alignment: "center",
   spacing: 1
 }, /*#__PURE__*/React.createElement(Icon, {
-  name: "exclamation-circle-filled",
+  name: "general.exclamationCircle",
   size: "md",
   color: "error"
 }), /*#__PURE__*/React.createElement(Text, {

package/dist/esm/system/default-theme.js

@@ -1,4 +1,5 @@
-import icons from '../icons';
+import * as general from "@planningcenter/icons/paths/general";
+import * as tapestry from "@planningcenter/icons/paths/tapestry";
 import { boxSizes } from './box-sizes';
 import { buttonThemes } from './button-themes';
 import { colors } from './colors';
@@ -12,7 +13,10 @@ var controlStyles = {
 var defaultTheme = {
   boxSizes: boxSizes,
   colors: colors,
-  icons: icons,
+  icons: {
+    general: general,
+    tapestry: tapestry
+  },
   breakpoints: {
     xs: 480,
     sm: 600,

package/dist/types/Alert/Alert.d.ts

@@ -2,8 +2,11 @@ import * as React from 'react';
 import { MediaQueries } from '../index';
 import { StackViewProps } from '../StackView';
 export declare type AlertProps = {
+    children?: any;
     /** Sets status theme colors. */
     type?: 'warning' | 'success' | 'error';
+    /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+    mediaQueries?: object;
 } & StackViewProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & AlertProps & MediaQueries<AlertProps>;
 export declare function Alert(props: Props): JSX.Element;

package/dist/types/Box/Box.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { StyleProps, MediaQueries, Variants } from '../index';
 export declare type BoxProps = {
+    children?: any;
     /**
-     * Render custom component or HTML element tag.
+     * Render custom component or HTML element tag. (Defaults to a `<div>` element).
      */
     as?: any;
     /**
@@ -10,13 +11,21 @@ export declare type BoxProps = {
      */
     innerRef?: any;
     /**
-     * If true, sets "display: inline-block", otherwise it defaults to "display: block"
+     * If true, sets `display: inline-block`, otherwise it defaults to `display: block`
      */
     inline?: boolean;
     /**
      * Controls display property. If `false` sets `display: none`, otherwise defaults to initial display value.
      */
     visible?: boolean;
+    /**
+    * Describes styles at various points in time. [Read about variants](/variants).
+    */
+    variants?: object;
+    /**
+    * Describes props at different breakpoints. [Read about mediaQueries](/responsive).
+    */
+    mediaQueries?: object;
 } & StyleProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & BoxProps & MediaQueries<BoxProps> & Variants<BoxProps>;
 /**